복합선택자

선택자 2개를 동시에 만족하는 요소를 선택하는 개념.

span.orange {}

span태그와 orange class를 동시에 만족하는 요소 선택

자식선택자

하위선택자를 좀 더 명확하게 하기 위해 보통 사용

ul>.orange {}

ul태그 안에 있는 orange class

하위선택자

선택자 ABC의 하위 요소 XYZ

ABC .XYZ {}

abc 태그 밑에 있는 XYZ class.
가운데 띄어쓰기가 포인트.

인접 형제 선택자

선택자 ABC의 다음 형제 요소 XYZ 하나를 선택

ABC + XYZ {}

같이 하는 것이 아니고 ABC 다음 XYZ를 선택

일반 형제 선택자

ABC 다음 형제 요소 XYZ 모두를 선택

ABC ~ XYZ {}

가상클래스 선택자

hover

마우스 커서가 올라가있는 동안에만 되는 것

.box:hover {}

active

마우스를 클릭하고 있는 동안에만

abc:active {}

focus

input 등 입력받는 것들, 즉 포커스가 되면 선택되는 것

input:focus {}

first-child

ABC 형제 요소 중 첫째 선택

ABC:first-child {}

.fruits span:first-child {}

last-child

ABC 형제요소 중 막내 선택

ABC:last-child{}

nth-child(n)

n번째 선택

ABC:nth-child(n)

.fluits *:nth-child(2)
.fluits *:nth-child(2n) - 짝수
.fluits *:nth-child(2n + 1) - 홀수
.fluits *:nth-child(n+2)

부정선택자

선택자 XYZ가 아닌 ABC 요소를 선택

ABC:not(XYZ)

.fruits *:not(span){}