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 요소
그래서 이 서체가 너무 마음에 들기에, 저는 제 컴퓨터의 기본 글꼴로 지정하리라고 마음먹었습니다. 서울 서체는 디자인서울총괄본부(
