셀렉터

h1 {}
div {}

전체 셀렉터

* {}

tag 셀렉터

footer, h2 {}

id

<div id='sample'>...</div>

#sample {
	color: yellow;
}

id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름

class

<div class='test'>...</div>

.test {
	background: black;
}

class는 여러번 적용가능

attribute 셀렉터

a[href] {}
li[id='one'] {}
li[class~='vim'] {}
li[class|='vim'] {}
section[id^='sub'] {}
div[class$='1'] {}
div[class*='g'] {}

후손 셀렉터

main div {}

자식 셀렉터

main > p {}

인접 형제 셀렉터

main + p {}

형제 셀렉터

main ~ p {}

가상 클래스

div:link {}
div:visited {}
div:hover {}
div:active {}
div:focus {}

요소 상태 셀렉터

input:checked + span {}
input:enabled + span {}
input:disabled + span {}

구조 가상 클래스 셀렉터

p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > li:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(3) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
div:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

부정 셀렉터

input:not([type='id']) {}
div:not(:nth-of-type(2)) {}

정합성 확인 셀렉터

input[type='text']:valid {}
input[type='text']:invalid {}