20091224 :: CSS3 선택자 명세

CSS는3 명세는 아직 개발 중인 규격이므로 아래의 선택자 명세는 최종 버전에서는 변경되거나 추가/ 삭제될 소지가 다분합니다. 또한 브라우저에 따라 표준 규격에 명시된다해도 지원되지 않는 경우도 있을 수 있습니다.

1. 유니버셜 셀렉터

용법 :

*

뜻 :

모든 요소 [2]

2. 타입 셀렉터

용법

E (타입명=태그명을 그대로 기술)

뜻:

E 타입의 요소

3. 속성 선택자

용법 :

E[foo]

뜻 :

foo 속성을 가진 E 타입의 요소 [2]

3.1. E[foo=”bar”]

foo 라는 속성을 가지며, 그 속성값이 “bar”인 요소 [2]

3.2. E[foo~=”bar”]

foo라는 속성을 가지며 그 속성값 중 공백으로 분리된 단어에 “bar”가 있는 요소[2]

3.3. E[foo^=”bar”]

foo라는 속성을 가지며, 그 속성 값이 “bar”로 시작하는 요소[3]

3.4. E[foo$=”bar”]

foo라는 속성을 가지며, 그 속성 값이 “bar”로 끝나는 요소[3]

3.5. E[foo*=”bar”]

foo라는 속성을 가지며, 그 속성 값 중 “bar”라는 문자열이 있는 요소 [3]

3.6. E[foo|=”en”]

foo라는 속성을 가지며, 그 속성 값에 하이픈으로 결합된 문자열이며, 그 중 “en”으로 시작하는 부분이 있는 경우 (예 : foo = “input-enabled” 와 같이)

3.7.  E:root

문서의 root 엘레먼트 (html 요소)

3.8. E:nth-child(n)

상위 요소의 n 번째 하위 요소. img:nth-child(3)은 상위 요소에 대한 하위 요소중에서 3번째를 의미한다. 즉 img:nth-chlid(3)은 div 하위에  p > p > img > p 순으로 요소가 나타날 때 적용될 수 있다.

3.9. E:nth-last-child(n)

상위 요소의 뒤에서 n 번째 하위 요소.

3.10. E:nth-of-type(n)

동일한 타입(테그 종류) 중에서 순서를 매겨 표시한다. 즉 동일한 상위요소 아래에 이미지가 3개 있는 경우, 이중 2번째 이미지라면 img:nth-of-type(2)라고 서술한다.

3.11. E:nth-last-of-type(n)

동일한 타입 중에서 뒤에서 부터 순서를 매겨 선택한다.

3.12. E:first-child

상위 요소에 대해 처음으로 나타나는 경우 li:first-child는 ul / ol 의 하위 중 첫 번째 리스트 목록만을 선택한다.

3.13 E:last-child

상위 요소에 대해 마지막으로 나타나는 경우

3.14 E:first-of-type

상위 요소에 대해 처음으로 나타나는 해당 태그의 경우. 예를 들어 본문 중 첫 링크를 특별히 표시하고자 할 때 사용한다.

3.15. E:last-of-type

상위 요소에 대해 마지막으로 나타나는 해당 태그.

3.16. E:only-chlild

상위 요소가 단 1개의 하위 요소를 가질 때만 선택됨.

3.17. E:only-of-type

상위 요소에 속한 하위 태그가 동일 태그가 1개만 들어있는 경우에 선택됨. (only-child는 종류에 무관하게 단 한 개의 하위 요소가 있는 경우에만 해당함)

3.18. E:empty

선택된 요소가 하위 요소를 가지지 않을 경우 (이 경우 텍스트 노드도 존재하지 않아야 한다.)

3.19. E:link

택된 요소가 링크이고, 해당 링크에 아직 방문한 적이 없는 경우.

3.20. E:visited

선택된 요소가 링크이고, 해당 링크에 방문한 적이 있는 경우.

3.21. E:active

사용자의 특정 행동에 의해 활성화된 경우

3.22. E:hover

사용자의 특정 행동에 의해 마우스포인터가 올려진 경우 (모든 요소에 대해 적용)

3.23. E:focus

사용자 행동에 의해 탭 포커스를 가지게 된 경우 (모든 요소에 대해 적용)

3.24. E:target

참조 URI의 타겟이 된 요소

3.25. E:lang(fr)

프랑스어로 언어 속성 (lang)을 가지는 요소. 언어 속성은 별도의 스펙 문서를 참고할 것.

3.26. E:enabled / E: disabled

요소의 상태값에 따라 선택함. 주로 form 의 하위 요소들에 사용

3.27. E:check

체크된 요소. 특히 라디오버튼이나 체크박스에 적용됨

3.28. E::first-line

포맷팅된 단락의 첫번 째 줄

3.29. E::first-letter

포맷팅된 단락의 첫번 째 글자

3.30. E::before

E요소 앞에서 새로 생성된 콘텐트에 대해 선택

3.31. E::after

E요소 뒤에 새로 생성된 콘텐트에 대해 선택

3.32. E.warning

E요소 중 클래스 속성이 ‘warning’ 인 요소

3.33. E#myid

요소 중  id 속성이 ‘myid’인 요소

3.34. E:not(s)

요소 중 s 선택자에 의해 선택이 제외되는 요소

3.34. E F

E의 하위 어딘가에서 나타나는 F 요소

3.35. E > F

E의 바로 하위에서만 나타나는 F 요소. CSS2에서부터 적용되며, 이를 사용할 경우 ul > li 로 선택하면, ul li ul li의 2중 구조 메뉴의 하위 메뉴들은 선택을 받지 않는다.

3.36. E + F

E의 바로 앞에 나타나는 F 요소

3.37. E ~ F

E의 앞 어딘가에서 나타나는 F 요소

  • 정의된 css 버전에 대해서는 아직 다 작성을 못했으니, 이는 추후에 다시 정리할 예정입니다.

  • 쑤아

    CSS땜에 한참 막히고 있었는데 유용하게 보고가네요~ 감사합니다^^

    • 개인적으로 참고하려고 정리해 놓은 거라, 그냥 보시고 이해하기 힘드셨을 수도 있을텐데… 도움이 되셨다니 제가 감사합니다. ^^