CSS 선택자 :nth-child() 사용법

CSS 선택자 :nth-child() 사용법

:nth-child( an+b )

:nth-child() 속성은 정말 유용하다. 웹사이트나 스킨을 디자인할 때, 내가 원하는 요소에만 CSS를 편하게 적용할 수 있게 해 준다. 여러 가지 적용방법이 있지만, 그중에서 가장 유용한 속성 중에 하나를 설명하고자 한다.

:nth-child()와 :nth-last-child()는 특정 순서에 있는 요소를 선택할 때 사용하는 선택자
:nth-child()는 앞에서부터 세고, :nth-last-child()는 뒤에서부터 셀 수 있다. 이 중에서 :nth-child()로도 선택자로 충분히 자유롭게 활용할 수 있다.

first나 last 사용법도 있지만, 여기서는 홀수와 배수 또는 특정요소를 의도하여 선택하고자 한다.

:nth-child( 2n+1 )

여기서 2는 n의 정수(0, 1, 2, 3, … 차례대로 대입이 된다.)
그러면 순서대로
1
3
5
7
9
와 같이 홀수로 선택자가 적용된다.

이와 같은 원리로 짝수로만 선택자를 적용하고 싶다면, 간단하게 적용할 수 있다.

:nth-child( 2n+2 )

여기서 2는 n의 정수(0, 1, 2, 3, … 차례대로 대입이 된다.)
그러면 순서대로
0
2
4
6
8
와 같이 홀수로 선택자가 적용된다.

여기서 odd 또는 even를 사용하는 방법도 있지만, 눈으로 이해하기 쉬운 문법은 위와 같다. 위의 문법을 활용하여 내가 원하는 요소를 쉽게 선택할 수 있다. 가장 간편한 방법은 아래와 같다.

홀수만 선택하기, 짝수만 선택하기

:nth-child( odd )

모든 홀수에 해당되는 요소에 선택자가 적용된다.

:nth-child( even )

모든 짝수에 해당되는 요소에 선택자가 적용된다.

사실 위의 방법이 가장 간단하다. 응용하면 다양한 선택자로 활용할 수 있다. 짝수 또는 홀수와 같은 간단한 원리라면 위의 문법을 활용하면 된다.