CSS 선택자 30개
css 선택자를 아직도 잘 몰라서 좋은 글을 발견해서 간단히 정리해본다.
1. *
전체요소를 선택함
2. #X
id를 대상으로 선택함
3. .X
class 선택자
4. X Y
descendent 하위 선택자
5. X
id class 가 아닌 type에 따라 한 페이지있는 모든 요소 type 연산자
6. X:visited 와 X:link
:link 클릭하기 전 상태의 a tag 전체 대상 / 가상 클래스 개념
:visited 클릭했었거나 방문했던 페이지 a tag / 가상 클래스 개념
7. X+Y
인접 선택자 / 앞의 요소 바로 뒤에 있는 요소만 선택함.
8. X>Y
직계 자식만을 선택한다.
9. X~Y
X + Y와 유사하지만 덜 엄격하다 바로 뒤 뿐만 아니라 뒤에 있는 모든
10. X[title]
속성 선택자 앞의 예에서 title 속성이 있는 요소만 석택함.
11. X[href="foo"]
12. X[href*="nettus"]
href에 nettus가 포함되면 선택됨
13. X[href^="http"]
href에 속성값이 http로 시작하면 선택됨
14. X[href$=".jpg"]
href에 속성값이 .jpg로 끝나면 선택됨
15. X[data-*="foo"]
ex) a[data-type="image"]{color:red;}
16. X[foo~="bar"]
foo 속성값에 bar이 포함되는 요소를 선택 (공백으로 분리된 값이 일치)
17. X:checked
라디오 버튼 / 체크박스처럼 체크되는 ui요소만 대상으로 함
18. X:after
before / after 가상 클래스
시작 지점에 생성된 요소 / 끝 지점에 생성된 요소
19. X:hover
사용자 동작 (user action) 가상 클래스
20. X:not(#선택자)
선택자를 제외한 X요소 / 여집합 개념인듯
21. X::가상 요소
첫줄, 첫 글자 같이 요소 일부분을 지정
22. X:nth-child(n)
요소중 특정요소 지목방법 유용
23. X:nth-last-child(n)
요소 끝에서 선택하는 방식 / 요소가 많을 때 뒤쪽 요소를 선택하는 경우 유용
24. X:nth-of-type(n)
child를 석택하지 않고 요소의 type을 선택할때
25. X:nth-last-of-type(n)
끝에서 부터 선택할때
26. X:first-child
첫 번째 등장하는 요소가 X일때
27. X:last-child
26 반대
28. X:only-child
유일한 자식일때만 선택
29. X:only-of-type
유일한 타입이면 선택
30. X:first-of-type
X요소 중 첫 번 째 X선택
