같은 레벨(형제) 관계의 요소 그룹에서 인수로 지정한 순서에 해당하는 요소를 선택자로 사용한다.
함수형 가상 클래스 :nth-child()
, nth-last-child()
에서 인수로 사용되는 값을 나타낸다.
:nth-child(<an+b> [of S]? )
선택자 목록 S와 일치하는 포함 형제로 구성된 목록의 An+Bth 공식에 맞는 요소와 일치한다. 구문 형식에서 S(선택자)를 생략하면 기본값은 특정하지 않는 *|*
이다.
다음과 같은 코드 예로 작성될 수 있다.
:nth-child(-n+3 of :not([hidden]))
of S
옵션 구문은 현재 모든 웹브라우저에서 지원하지 않는다. 그러므로 적용 시점에서 확인이 필요하다.아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
An+B 표기법은 원래 다른 CSS와 약간 다른 토큰화자를 사용하여 정의되었기 때문에 CSS 토큰으로 표현할 때 다소 이상하게 정의되지만 :nth-child()
등의 함수형 가상 클래스에서 형제 관계의 요소를 찾는 매우 다양한 공식을 제공한다. 추가적인 내용은 상세 설명을 참고한다.
odd |even |<integer>
ul > li:nth-child(odd)
ul > li:nth-child(even)
ul > li:nth-child(3)
<n-dimension> |'+'?† n |-n
ul > li:nth-child(2n)
ul > li:nth(n)
ul > li:nth(+n) /* Same */
ul > li:nth-child(-n)
<ndashdigit-dimension> |'+'?† <ndashdigit-ident> |<dashndashdigit-ident>
ul > li:nth-child(3n-2)
ul > li:nth-child(+n-2)
ul > li:nth-child(n-2)
ul > li:nth-child(-n-2)
<n-dimension> <signed-integer> |'+'?† n <signed-integer> |-n <signed-integer>
ul > li:nth-child(2n +9)
ul > li:nth-child(n +9)
ul > li:nth-child(+n +9)
ul > li:nth-child(-n +9)
<ndash-dimension> <signless-integer> |'+'?† n- <signless-integer> |-n- <signless-integer>
ul > li:nth-child(2n- 9)
ul > li:nth-child(n- 9)
ul > li:nth-child(+n- 9)
ul > li:nth-child(-n- 9)
<n-dimension> ['+' | '-'] <signless-integer> '+'?† n ['+' | '-'] <signless-integer> |-n ['+' | '-'] <signless-integer>
ul > li:nth-child(2n + 9)
ul > li:nth-child(n + 9)
ul > li:nth-child(+n + 9)
ul > li:nth-child(-n + 9)
'-n-*'에 대한 ASCII 대소문자 구분 일치 항목인 <ident-token>이다. '*'는 일련의 하나 이상의 숫자이다.
<number-token>
유형 플래그가 'integer
'인 소숫점이 없는 정수를 표현한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
유형 플래그 'integer
'로 설정된 <dimension-token>
이며 'n
'에 대한 ASCII 대소문자 구분 일치 단위이다.
<number> 값이 포함되어 있으며 추가로 'integer' 또는 'number'로 설정된 유형 플래그가 있다. 다르게 설정되지 않은 경우 유형 플래그의 기본값은 'integer'이다. 그리고 하나 이상의 코드 포인트로 구성된 단위가 추가로 있다.
유형 플래그 'integer
'로 설정된 <dimension-token>
이며 'n-
'에 대한 ASCII 대소문자 구분하지 않는 일치 단위이다.
<number> 값이 포함되어 있으며 추가로 'integer' 또는 'number'로 설정된 유형 플래그가 있다. 다르게 설정되지 않은 경우 유형 플래그의 기본값은 'integer'이다. 그리고 하나 이상의 코드 포인트로 구성된 단위가 추가로 있다.
유형 플래그 'integer
'로 설정된 <dimension-token>
이며 'n-*
'에 대한 ASCII 대소문자 구분하지 않는 일치 단위이다. '*
'는 일련의 1
또는 더 많은 자리수를 의미한다.
<number> 값이 포함되어 있으며 추가로 'integer' 또는 'number'로 설정된 유형 플래그가 있다. 다르게 설정되지 않은 경우 유형 플래그의 기본값은 'integer'이다. 그리고 하나 이상의 코드 포인트로 구성된 단위가 추가로 있다.
'n-*
'에 대한 ASCII 대소문자 구분 일치 항목인 <ident-token>
이다. '*
'는 일련의 하나 이상의 숫자이다.
유형 플래그가 'integer
'인 <number-token>
이며 '+
' 또는 '-
'로 시작한다.
유형 플래그가 'integer
'인 <number-token>
이며 숫자로 시작한다.
An+B 공식에서 A는 2
이고 B는 0
이다. 짝수번째를 의미한다.
0
부터 시작하는 음수가 아닌 모든 정수를 의미한다.
An+B 공식에서 A는 2
이고 B는 1
이다. 홀수번째를 의미한다.
li:nth-child(2)
li
요소 중에서 2번째 순서를 갖는 요소를 선택자로 사용한다.
li:nth-child(odd)
li
요소 중에서 odd(홀수) 순서를 갖는 요소를 선택자로 사용한다.
li:nth-child(even)
li
요소 중에서 even(짝수) 순서를 갖는 요소를 선택자로 사용한다.
li:nth-child(3n)
순서가 3
번째 마다 해당되는 요소를 선택자로 사용한다.
li:nth-child(n+3)
li
요소중에서 3
번째 해당되는 요소와 그 이후의 모든 요소를 선택자로 사용한다.
li:nth-child(3n+2)
li
요소 중에서 2
, 5
, 8
, .. 번째 요소들을 선택자로 사용한다.
Modules | ||
---|---|---|
Module Name | Status | Summary |
Selectors Level 3 | Last review date: 2023-2-23 | |
Selectors Level 4 | Last review date: 2023-2-23 |
대상 요소들 중에서 홀수번째 순서에 해당하는 모든 요소들을 선택자로 사용한다.
대상 요소들 중에서 짝수번째 순서에 해당하는 모든 요소들을 선택자로 사용한다.
대상 요소들 중에서 숫자로 지정된 순서에 해당하는 요소를 선택자로 사용한다.
대상 요소들 중에서 다섯번째(예를 들어)마다 순서에 해당하는 모든 요소들을 선택자로 사용한다.
다음 아래의 공식과 동일하다.
5x1, 5x2, 5x3, ...
대상 요소들 중에서 7번째(예를 들어)와 그 이후의 순서에 해당하는 모든 요소들을 선택자로 사용한다.
다음 아래의 공식과 동일하다.
0+7, 1+7, 2+7, ...
위 예의 경우 대상 요소들 중에서 다음 공식에 따라 해당하는 모든 요소들을 선택자로 사용한다.
3x0+4, 3x1+4, 3x2+4, ...
위 예의 경우 대상 요소들 중에서 다음 공식에 따라 해당하는 모든 요소들을 선택자로 사용한다.
-0+3, -1+3, -2+3
대상 요소 모두를 선택자로 사용한다.
대상 요소들 중에서 7번째(예를 들어) 부터 14번째 까지의 모든 요소들을 선택자로 사용한다.