..

Search

40) CSS3 선택자

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 선택자 수업에서 확인할 수 있습니다.

 

CSS 선택자 수업 확인 =>


연습문제