An+B 표기법은 원래 다른 CSS와 약간 다른 토큰화자를 사용하여 정의되었기 때문에 CSS 토큰으로 표현할 때 다소 이상하게 정의되지만 :nth-child() 등의 함수형 가상 클래스에서 형제 관계의 요소를 찾는 매우 다양한 공식을 제공한다. 추가적인 내용은 상세 설명을 참고한다.
이 공식에서 A(또는 a)와 B(또는 b)는 각각 <interger>의 단계와 오프셋을 의미한다. 모든 양의 정수(n) 또는 n의 0 값에 대해 목록의 An+B번째 요소를 나타낸다. 예를 들면 다음과 같다.
2n+32*0+3, 2*1+3, 2*2+3, 2*3+3, .. 를 나타내며 결과적으로 3, 5, 7, 9, .. 값을 가지고 이 순서에 해당하는 모든 형제 요소들과 일치한다.n+70+7, 1+7, 2+7, 3+7, ... 를 나타내며 순서상 7번째를 포함한 이후 모든 형제 요소들과 일치한다.-n+3-0+3, -1+3, -2+3, -3+3, -4+3, ... 를 나타내며 순서상 3번째를 포함한 이전 모든 형제 요소들과 일치한다.n은 형식 구문에 의하면 아래와 같이 다양한 타입을 가지고 있다.
n 앞에 <integer> 값을 갖는다.n- 앞에 <integer> 값을 갖는다.n- 다음에 0~9 범위의 하나 이상의 숫자를 연속해서 가질 수 있으며 앞에 <integer> 값을 갖는다.n- 다음에 0~9 범위의 하나 이상의 숫자를 연속해서 가질 수 있다.-n- 다음에 0~9 범위의 하나 이상의 숫자를 연속해서 가질 수 다.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)| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| CSS Syntax Module Level 3 | Last review date: 2022-11-27 | |