S 구문으로 :nth-child() 선택항목을 더 세부적으로 제어

An+B 로직을 적용하기 전에 하위 요소 집합을 사전 필터링합니다.

Bramus

:nth-child() 및 :nth-last-child() 가상 클래스 선택기

:nth-child() 의사 클래스 선택기를 사용하면 색인으로 DOM의 요소를 선택할 수 있습니다. An+B 마이크로신택스를 사용하면 선택할 요소를 세밀하게 제어할 수 있습니다.

• :nth-child(2): 두 번째 자녀를 선택합니다.
• :nth-child(2n): 짝수 번째 자식 (2번째, 4번째, 6번째, 8번째 등)을 모두 선택합니다.
• :nth-child(2n+1): 모든 홀수 하위 요소를 선택합니다(1번째, 3번째, 5번째, 7번째 등).
• :nth-child(5n+1): 첫 번째 (=(5×0)+1), 여섯 번째 (=(5×1)+1), 열한 번째 (=(5×2)+1) 자식을 선택합니다.
• :nth-child(5n+2): 두 번째 (=(5×0)+2), 일곱 번째 (=(5×1)+2), 열두 번째 (=(5×2)+2), … 자식을 선택합니다.

하지만 A 매개변수를 생략하면 더 많은 광고 소재를 선택할 수 있습니다. 예를 들면 다음과 같습니다.

• :nth-child(n+3): 세 번째 자식부터 모든 자식을 선택합니다(3번째, 4번째, 5번째 등).
• :nth-child(-n+5): 5번째 자식까지 모두 선택합니다(1st, 2nd, 3rd, 4th, 5th).

이러한 :nth-child() 선택 항목을 몇 개 조합하면 요소 범위를 선택할 수 있습니다.

• :nth-child(n+3):nth-child(-n+5): 세 번째부터 다섯 번째까지의 자식을 모두 선택합니다(3rd, 4th, 5th).

:nth-last-child()를 사용하면 비슷한 선택을 할 수 있지만 처음부터 세는 대신 끝에서부터 세기 시작합니다.

of S 문법으로 선택 항목 사전 필터링

CSS 선택자 수준 4의 새로운 기능은 선택자 목록을 :nth-child() 및 :nth-last-child()에 선택적으로 전달할 수 있다는 것입니다.

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

of S가 지정되면 An+B 논리는 지정된 선택기 목록 S와 일치하는 요소에만 적용됩니다. 즉, An+B가 작업을 수행하기 전에 하위 요소를 사전 필터링할 수 있습니다.

예

예를 들어 :nth-child(2 of .highlight)는 .highlight 클래스가 있는 두 번째 일치 요소를 선택합니다. 다시 말해 .highlight 클래스가 있는 모든 하위 요소 중에서 두 번째 요소를 선택합니다.

.highlight:nth-child(2)는 클래스가 .highlight이고 또한 두 번째 하위 요소인 요소를 선택합니다.

아래 데모에서 이 차이점을 확인할 수 있습니다.

• :nth-child(2 of .highlight)와 일치하는 요소의 테두리가 분홍색입니다.
• .highlight:nth-child(2)와 일치하는 요소에는 녹색 윤곽선이 있습니다.

S는 선택기 목록이므로 쉼표로 구분된 여러 선택기를 허용합니다. 예를 들어 :nth-child(4 of .highlight, .sale)는 형제자매 집합에서 .highlight 또는 .sale인 네 번째 요소를 선택합니다.

아래 데모에서 :nth-child(4 of .highlight, .sale)와 일치하는 요소에는 주황색 윤곽선이 적용되어 있습니다.

얼룩말 줄무늬 다시 살펴보기

:nth-child()가 사용되는 대표적인 예는 얼룩말 무늬 테이블을 만드는 경우입니다. 각 테이블 행의 색상이 번갈아 표시되는 시각적 기법입니다. 일반적으로 다음과 같은 방법으로 접근합니다.

tr:nth-child(even) {
  background-color: lightgrey;
}

정적 테이블에서는 이 방법이 잘 작동하지만 테이블 콘텐츠를 동적으로 필터링하기 시작하면 문제가 발생합니다. 예를 들어 두 번째 행이 숨겨지면 첫 번째 행과 세 번째 행이 표시되고 각 행의 배경색은 동일합니다.

이 문제를 해결하려면 An+B 로직에서 숨겨진 행을 제외하여 :nth-child(An+B [of S]?)를 활용하면 됩니다.

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

정말 멋지죠?

사진: 마르쿠스 스피스케(Unsplash 제공)