06.12(선택자)

selector(선택자)

전체 선택자	* { color: red; }
HTML 요소 선택자	h2 { color: teal; text-decoration: underline; }
아이디(id) 선택자	#idName{ color: sandybrown; text-decoration: line-through; }
클래스(class) 선택자	.className{ color: deepskyblue; text-decoration: overline; }
그룹(group) 선택자	h2, h3, p { background-color: lightgray; }

 

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(선택자)	모든 선택자와 함께 사용할 수 있으며, 해당 선택자의 의미를 반대로 적용함

 

 

선택자 우선순위

태그선택자 < 속성선택자 < 클래스 선택자 < 아이디선택자 < 인라인작성 < !important(제일 높음)