요소의 특정 상태를 선택하는 데 사용

가상 클래스 선택자

:hover

.example1 ul li:hover {
	color: red;
}

• 요소에 마우스가 올려져 있는 상태를 선택

:focus

.example2 input:focus {
	color: red;
}

• 요소가 포커스를 받았을 경우를 선택(입력창 클릭, 탭키 사용 ..)

:active

.example3 input:active {
	color: red;
}

• 요소가 활성화되었을 경우를 선택(마우스 클릭 중 ..)

child & type

• child: 부모가 가진 모든 형제 요소 중 선택
• of-type: 부모가 가진 타입이 동일한 형제 요소 중 선택

first-child (:first-of-type)

.example4 ul li:first-child { // child
	color: red;
}

.example4 ul li:first-of-type {// of-type
	color: red;
}

• 부모의 자식 요소 중 (타입이 동일한) 첫 번째 자식 요소를 선택

last-child (:last-of-type)

.example5 ul li:last-child { // child
	color: red;
}

.example5 ul li:last-of-type { // of-type
	color: red;
}

• 부모의 자식 요소 중 (타입이 동일한) 마지막 자식 요소를 선택

nth-child(n) (:nth-of-type(n))

.example6 ul li:nth-child(2) { // child
	color: red;
}

.example6 ul li:nth-of-type(2) { // of-type
	color: red;
}

• 부모의 자식 요소 중 (타입이 동일한) 특정 자식 요소를 선택
  • n: n번째 요소
  • even: 짝수 번째 요소
  • odd: 홀수 번째 요소
  • 2n+1;과 같이 수식도 사용할 수 있음

not(x)

.example9 ul li:not(first-child) {
	color: red;
}

• x 조건에 해당하지 않는 요소를 선택
• x 조건에는 일반적인 선택자 식이 쓰인다.
  • not(li:first-child), not(:hover), ..