CSS 선택자 고급 - ":nth-" 가상 클래스로 필터링 하기

"nth-" 시작하는 CSS 선택자는 선택 조건에 맞는 n번째 요소(1부터 시작) 를 선택하는 CSS 선택자 입니다.

종류라고 해야 3가지 밖에 없지만, 몇 가지 트릭을 조합하면, 필요로 하는 요소들을 정확하게 선택할 수 있습니다.

그중 "nth-child" 와 "nth-last-child"는 선택을 시작하는 방향만 다를 뿐 같은 가상 클래스 선택자입니다.

":nth-" 가상 클래스 선택자는 파라메터에 간단한 계산식을 사용할 수 있기 때문에 특정 범위의 요소들을 선택할 수 있는 특징이 있습니다.

예를 들어 다음과 같은 HTML 내용엣 ":nth-" 가상 선택자로 선택을 해보도록 하겠습니다.

<article class="posts">
    <h1>타이틀</h1>
    <p class="item">아이템</p>
    <p class="item">아이템</p>
    <hr>
    <p class="xitem">아이템</p>
    <p class="item">아이템</p>
    <p class="item">아이템</p>
</article>

1. 짝수 요소만 선택

짝수를 선택하는 수식은 "2n"을 사용합니다. 또는, 키워드를 사용해 다음과 같이 사용할 수도 있습니다.

".posts .item:nth-child(even)" 과 ".posts .item:nth-child(even)" 은 같은 것입니다.

.posts .item:nth-child(2n)

".posts" 클래스의 모든 자식 요소들 중 짝수 요소에서 ".item" 클래스를 가진 요소만 선택합니다.

중요합니다.

"nth-child", "nth-last-child" 가상 클래스 선택자는 부모 요소의 모든 자식 요소 중 파라메터 조건식에 매치되는 요소를 먼저 선택하고, 그 다음에 자식 요소의 클래스/태그로 한정합니다.

자식 요소로 클래스와 태그 모두 사용할 수 있습니다.

.posts p:nth-of-type(2n)

":nth-child"와 달리 부모 요소의 자식 태그에 해당하는 요소를 먼저 선택하고, 선택된 요소들 중에서 ":nth-of-type" 파라메터 순서에 해당하는 요소들을 선택합니다.

".posts p:nth-of-type(2n)"을 풀어서 설명하면 .posts" 클래스의 자식 요소들 중 "<p>" 태그인 가진 자식 요소들 중에서 짝수 순서의 요소만 선택합니다.

2. 홀수 요소만 선택

가상 선택자 파라메터 수식의 "2n+1"과 "2n-1"은 같은 결과를 반환합니다. 어떤 것을 써도 무방합니다.

단, 홀수 선택을 제외한 "3n+1"(1, 4, 7...)과 "3n-1"(2, 5, 8...)과 같은 수식은 다른 결과를 반환하므로 주의해야 합니다.

홀수를 선택하는 수식은 "2n+1"을 사용합니다. 또는, 키워드를 사용해 다음과 같이 사용할 수도 있습니다.

".posts .item:nth-child(odd)" 과 ".posts .item:nth-child(2n+1)" 은 같은 것입니다.

.posts .item:nth-child(2n+1)

부모 요소의 전체 자식 요소들 중 홀수 순서인 요소에서 자식 요소 태그/클래스를 가진 것만을 선택합니다.

.posts p:nth-of-type(2n+1)

부모 요소의 자식 요소들 중 태그/클래스를 가진 자식 요소에서 홀수 순서인 요소만 선택합니다.

3. 앞에서 2개만 선택

변수(n) 값을 음수로 사용할 수 있는 트릭을 이용하면 자식 요소 들 중 앞에서 몇 개만을 선택적으로 가져올 수 있습니다.

.posts .item:nth-child(-n+2)

부모 요소의 자식 요소들 중 앞에서 2개를 선택하고 그중 자식 요소 태그/클래스를 가진 요소만 선택합니다.

.posts p:nth-of-type(-n+2)

부모 요소의 특정 태그/클래스를 가진 자식 요소들 중 앞에서 2개를 선택합니다. 특정 태그/클래스를 가진 자식 요소가 2개 미만일 경우 최대 갯수만큼만 선택됩니다.

같은 원리로 앞에서 5개 요소를 선택하려면 ":nth-child(-n+5)" 와 같은 표현을 사용하면 됩니다.

4. 뒤에서 2개만 선택

변수(n) 값을 음수로 사용할 수 있는 트릭을 이용하면 자식 요소 들 중 뒤에서 몇 개만을 선택적으로 가져올 수 있습니다.

.posts .item:nth-last-child(-n+2)

부모 요소의 자식 요소들 중 앞에서 2개를 선택하고 그중 자식 요소 태그/클래스를 가진 요소만 선택합니다.

.posts p:nth-last-of-type(-n+2)

부모 요소의 특정 태그/클래스를 가진 자식 요소들 중 뒤에서 2개를 선택합니다. 특정 태그/클래스를 가진 자식 요소가 2개 미만일 경우 최대 갯수만큼만 선택됩니다.

5. ":nth-of-type" 선택자의 제한

"nth-of-type" 가상 클래스 이름 대로 타입이 같은 그러니까 태그 요소만 자식 요소로 사용할 수 있으며, 클래스는 자식 요소 선택자로 사용할 수 없습니다.

".item:nth-of-type(n)" 이나 "p.item:nth-of-type(n)" 과같은 클래스를 조합한 선택자는 사용할 수 없습니다.

다만, 실제로는 클래스를 자식 요소로 사용할 수는 있습니다.

그리고, 사용할 수는 있지만 실제 선택자 적용은 예상과는 전혀 다게 되므로 사용하지 않아야 합니다.