Css란[3]

선택자 종류

선택자란?

웹 페이지의 특정 요소를 선택하는 것이 선택자입니다. Css를 사용할 때 주로 사용하지만 javaScript, Jquery에서도 같은 개념이 사용됩니다. 웹페이지의 특정 요소란 HTML의 특정 코드로 TAG를 찾을 수 있고 특정 ID, 특정 Class를 선택하여 Css를 설정하거나 Event를 설정해 줄 수 있다.

Jquery 기준

1. Tag 선택자 : "Tag명"
2. ex) $("a") or $("div")
3. Id 선택자 : # + "id Value"
4. ex) -> $("#test")
5. Class 선택자 :. + "Class Name"
6. ex) -> $(". test")
7. 직계 자손 선택자 : "parent > chlid"
8. 자손 선택자 : "parent chlid"
9. 모든 Tag : *
10. 형제 선택자 : A + B
11. 모든 형제 선택자 : A~B
12. N 번째 선택자 인자 찾기
13. 첫 번째 인자 : "Selector":first-child
14. 같은 Level의 Tag가 존재하지 않음 : "Selector":only-child
15. A번째 인자 : "Selector":nth-child(A)
16. 뒤에서 A번째 인자 : "Selector":nth-last-child(A)
17. 마지막 인자 : "Selector":last-child
18. N 번째 Tag 찾기
19. 첫 번째 Tag 찾기 : "Selector":first-of-type
20. A번째 Tag 찾기 : "Selector":nth-of-type(A)
21. A 대신에 "even" 대입시 짝수 번째 Tag전부
22. A 대신에 "odd" 대입시 홀수 번째 Tag 전부
23. 등비, 등차수열 가능(An+B 수정 가능) : "Selector":nth-of-type(An+B)
24. 같은 형제 Tag 중 같은 Tag가 없는 내용을 찾는다. : "Selector":only-of-type
25. 마지막 Tag : "Selector":last-of-type
26. 자식 인자가 없을 때: "Selector":empty
27. 반대 : "Selector":not()
28. ex) "Selector":not(#fancy)
29. ex) "Selector":not(:first-child)
30. ex) "Selector":not(. big,. medium)