An+B 로직을 적용하기 전에 하위 요소 집합을 미리 필터링합니다.
:nth-child() 및 :nth-last-child() 의사 클래스 선택기
:nth-child() 의사 클래스 선택기를 사용하면 색인으로 DOM의 요소를 선택할 수 있습니다. An+B 마이크로 구문을 사용하면 선택하려는 요소를 세밀하게 제어할 수 있습니다.
:nth-child(2): 두 번째 하위 요소를 선택합니다.:nth-child(2n): 모든 짝수 하위 요소(2번째, 4번째, 6번째, 8번째 등)를 선택합니다.:nth-child(2n+1): 모든 홀수 하위 요소를 선택합니다(첫 번째, 세 번째, 다섯 번째, 7번째 등).:nth-child(5n+1): 첫 번째(=(5×0)+1), 6번째(=(5×1)+1), 11번째(=(5×2)+1), ... 하위 항목을 선택합니다.:nth-child(5n+2): 두 번째(=(5×0)+2), 7번째(=(5×1)+2), 12번째(=(5×2)+2), ... 하위 요소를 선택합니다.
하지만 A 매개변수를 생략하는 경우 더 많은 광고 소재를 선택할 수 있습니다. 예를 들면 다음과 같습니다.
:nth-child(n+3): 세 번째 위부터 (세 번째, 4번째, 5번째 등) 모든 자녀를 선택합니다.:nth-child(-n+5): 다섯 번째까지의 모든 하위 항목을 선택합니다(첫 번째, 두 번째, 세 번째, 네 번째, 다섯 번째).
다음과 같이 선택된 :nth-child() 중 일부를 결합하면 요소의 범위를 선택할 수 있습니다.
:nth-child(n+3):nth-child(-n+5): 세 번째부터 다섯 번째까지(세 번째, 네 번째, 다섯 번째) 모든 하위 항목을 선택합니다.
: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가 실행되기 전에 하위 요소를 사전 필터링할 수 있습니다.
브라우저 지원
- 111
- 111
- 113
- 9
예
예를 들어 :nth-child(2 of .highlight)는 .highlight 클래스가 있는 두 번째 일치하는 요소를 선택합니다. 다르게 표현하면 .highlight 클래스가 있는 모든 하위 요소 중에서 두 번째 하위 요소를 선택합니다.
이는 .highlight 클래스가 동시에 두 번째 하위 요소이기도 한 요소를 선택하는 .highlight:nth-child(2)와 대조됩니다.
아래 데모에서 이러한 차이를 확인할 수 있습니다.
: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;
}
이는 정적 테이블에서 잘 작동하지만 테이블 콘텐츠를 동적으로 필터링하기 시작하면 문제가 됩니다. 예를 들어 2행이 숨겨지면 1행과 3행이 모두 같은 배경색으로 표시됩니다.
이 문제를 해결하려면 숨겨진 행을 An+B 로직에서 제외하여 :nth-child(An+B [of S]?)를 활용하면 됩니다.
tr:nth-child(even of :not([hidden])) {
background-color: lightgrey;
}
정말 멋지죠?