[CSS3] CSS가상 선택자 정리 및 비교 (first-child, last-child, nth-child, nth-of-type, )

(1) nth-child

:nth-child(1) = 첫번째 선택

span

p

span

p

span

p

p

p

p

p

:nth-child(2n) = 두번째 마다 선택

span

p

span

p

span

p

p

p

p

p

:nth-child(2n+1) = 첫번째 요소부터 2번째 마다 선택

span

p

span

p

span

p

p

p

p

p

:nth-child(2n+5) = 다섯번째 부터 2개 마다 선택

span

p

span

p

span

p

p

p

p

p

:nth-child(-2n+5) = 첫번째 요소부터 5번째 요소까지 2개 마다 선택

span

p

span

p

span

p

p

p

p

p

:nth-child(n+5) = 5번째 부터 모두 선택

span

p

span

p

span

p

p

p

p

p

:nth-child(-n+5) = 앞에서부터 5개만 선택

span

p

span

p

span

p

p

p

p

p

:nth-child(n+3):nth-child(-n+8) = 선택자를 두번 사용하여 교집합인 요소만 선택할 수 있다.

span

p

span

p

span

p

p

p

p

p

:nth-child(odd) = 홀수 선택

span

p

span

p

span

p

p

p

p

p

:nth-child(even) = 짝수 선택

span

p

span

p

span

p

p

p

p

p

  (2) nth-of-type

p:nth-of-type(1) = 부모안에 요소 중 첫번째 p요소 선택

span

p

span

p

span

p

p

p

p

p

p:nth-of-type(2n+1) = 부모안에 p요소 중 첫번째부터 2번째마다 선택

span

p

span

p

span

p

p

p

p

p

p:nth-of-type(n+2):nth-of-type(-n+5) = 선택자를 두번 사용하여 교집합인 요소만 선택할 수 있다.

span

p

span

p

span

p

p

p

p

p

※ :nth-child와 마찬가지로 모든 선택자 속성을 사용할 수 있다.

※ :nth-child와 차이점은 모든 속성이 아닌 선택한 요소 중에서 선택을 한다.

  (3) first-child

:first-child = 부모안에 모든 요소 중 첫번째 요소 선택

span

p

span

p

span

p

p

p

p

p

  (4) last-child

:last-child = 부모안에 모든 요소 중 첫번째 요소 선택

span

p

span

p

span

p

p

p

p

p

  (5) first-of-type

p:first-of-type = 부모안에 모든 p요소 중 첫번째 p요소 선택

span

p

span

p

span

p

p

p

p

p

  (6) last-of-type

span:last-child = 부모안에 모든 span요소 중 마지막 span요소 선택

span

p

span

p

span

p

p

p

p

p