같은 레벨(형제) 요소 그룹 (단위)내에서 선택자와 동일한 타입을 갖는 대상중에 인수로 지정된 위치(순서) 값을 갖는 요소를 선택자로 사용한다.
함수형 가상 클래스 :nth-of-type()
, nth-last-of-type()
에서 인수로 사용되는 값을 나타낸다.
:nth-of-type(An+B)
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
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
이다. 홀수번째를 의미한다.
span:nth-of-type(2)
span
태그이면서 2번째 해당하는 요소를 선택자로 사용한다.
li:nth-of-type(-n+3)
li
타입이면서 처음부터 3번째까지 해당되는 요소를 선택자로 사용한다.
Modules | ||
---|---|---|
Module Name | Status | Summary |
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번째 까지의 모든 요소들을 선택자로 사용한다.