CSS3 선택자
CSS3 선택자(selector)
CSS3에서는 다양한 기능을 하는 많은 선택자가 새롭게 정의되었습니다.
선택자(selectors) Level 3
CSS3에서 새롭게 정의된 선택자는 다음과 같습니다.
| 선택자 | 설명 |
|---|---|
| 일반 동위 선택자 | 해당 요소와 동위 관계에 있으며, 문서의 위치에서 해당 요소보다 뒤에 위치한 모든 특정 요소를 선택함. |
| [속성이름^="속성값"] 선택자 | 특정 속성의 속성값이 특정 문자열로 시작하는 요소를 선택함. |
| [속성이름$="속성값"] 선택자 | 특정 속성의 속성값이 특정 문자열로 끝나는 요소를 선택함. |
| [속성이름*="속성값"] 선택자 | 특정 속성의 속성값이 특정 문자열로 시작하는 하나의 단어로 된 요소를 선택함. |
| :root | 문서의 루트(root) 요소를 선택함. |
| :nth-child | 모든 자식(child) 요소들 중에서 앞에서부터 n번째에 위치한 자식(child) 요소를 모두 선택함. |
| :nth-last-child | 모든 자식(child) 요소들 중에서 뒤에서부터 n번째에 위치한 자식(child) 요소를 모두 선택함. |
| :nth-of-type | 모든 자식(child) 요소들 중에서 n번째로 등장하는 특정 타입의 요소를 모두 선택함. |
| :nth-last-of-type | 모든 자식(child) 요소들 중에서 뒤에서부터 n번째로 등장하는 특정 타입의 요소를 모두 선택함. |
| :last-child | 모든 자식(child) 요소들 중에서 맨 마지막에 위치한 자식(child) 요소를 모두 선택함. |
| :first-of-type | 모든 자식(child) 요소들 중에서 맨 처음으로 등장하는 특정 타입의 요소를 모두 선택함. |
| :last-of-type | 모든 자식(child) 요소들 중에서 맨 마지막으로 등장하는 특정 타입의 요소를 모두 선택함. |
| :only-child | 자식(child) 요소를 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함. |
| :only-of-type | 자식(child) 요소로 특정 타입의 요소를 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함. |
| :empty | 자식(child) 요소를 전혀 가지고 있지 않은 요소를 모두 선택함. |
| :target | 현재 활성화된 target 요소를 모두 선택함. |
| :checked | 체크된(checked) 상태의 input 요소를 모두 선택함. |
| :enabled | 사용할 수 있는 input 요소를 모두 선택함. |
| :disabled | 사용할 수 없는 input 요소를 모두 선택함. |
| :not(선택자) | 모든 선택자와 함께 사용할 수 있으며, 해당 선택자의 의미를 반대로 적용함. |
CSS3에서 새롭게 정의된 선택자에 대한 더 자세한 사항은 CSS 선택자 수업에서 확인할 수 있습니다.
