Selectors

Editing
  • account_tree
  • bug_report

:nth-of-type()

같은 레벨(형제) 요소 그룹 (단위)내에서 선택자와 동일한 타입을 갖는 대상중에 인수로 지정된 위치(순서) 값을 갖는 요소를 선택자로 사용한다.

사용 가능한 선택자 타입

<type-for-nth>

DEVDIC-Specified Data Types

함수형 가상 클래스 :nth-of-type(), nth-last-of-type()에서 인수로 사용되는 값을 나타낸다.

  • Selectors Level 4
    :nth-of-type(An+B)

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <an+b>

    An+B 표기법은 원래 다른 CSS와 약간 다른 토큰화자를 사용하여 정의되었기 때문에 CSS 토큰으로 표현할 때 다소 이상하게 정의되지만 :nth-child() 등의 함수형 가상 클래스에서 형제 관계의 요소를 찾는 매우 다양한 공식을 제공한다. 추가적인 내용은 상세 설명을 참고한다.

    • CSS Syntax Module Level 3
      odd |even |<integer>

      예시

      odd: 모든 홀수 번째 대상과 일치
      ul > li:nth-child(odd)
      even: 모든 짝수 번째 대상과 일치
      ul > li:nth-child(even)
      <integer>: 지정 순서(3번째)와 일치
      ul > li:nth-child(3)
      예시 샘플
    • CSS Syntax Module Level 3
      <n-dimension> |'+'?|-n

      예시

      <n-dimension>: 2번째 마다 일치
      ul > li:nth-child(2n)
      +n 또는 n: 모든 대상과 일치
      ul > li:nth(n)
      ul > li:nth(+n) /* Same */
      -n: 일치대상 없음
      ul > li:nth-child(-n)
      예시 샘플
    • CSS Syntax Module Level 3
      <ndashdigit-dimension> |'+'? <ndashdigit-ident> |<dashndashdigit-ident>

      예시

      <ndashdigit-dimension>
      ul > li:nth-child(3n-2)
      '+'<ndashdigit-ident>
      ul > li:nth-child(+n-2)
      ul > li:nth-child(n-2)
      <dashndashdigit-ident>
      ul > li:nth-child(-n-2)
      예시 샘플
    • CSS Syntax Module Level 3
      <n-dimension> <signed-integer> |'+'? n <signed-integer> |-n <signed-integer>

      예시

      <n-dimension> <signed-integer>
      ul > li:nth-child(2n +9)
      '+n' <signed-integer>
      ul > li:nth-child(n +9)
      ul > li:nth-child(+n +9)
      '-n' <signed-integer>
      ul > li:nth-child(-n +9)
      예시 샘플
    • CSS Syntax Module Level 3
      <ndash-dimension> <signless-integer> |'+'? n- <signless-integer> |-n- <signless-integer>

      예시

      <ndash-dimension> <signless-integer>
      ul > li:nth-child(2n- 9)
      '+n-' <signless-integer>
      ul > li:nth-child(n- 9)
      ul > li:nth-child(+n- 9)
      '-n-' <signless-integer>
      ul > li:nth-child(-n- 9)
      예시 샘플
    • CSS Syntax Module Level 3
      <n-dimension> ['+' | '-'] <signless-integer>
      '+'? n ['+' | '-'] <signless-integer> |-n ['+' | '-'] <signless-integer>

      예시

      <n-dimension> ['+' | '-'] <signless-integer>
      ul > li:nth-child(2n + 9)
      '+n' ['+' | '-'] <signless-integer>
      ul > li:nth-child(n + 9)
      ul > li:nth-child(+n + 9)
      '-n' ['+' | '-'] <signless-integer>
      ul > li:nth-child(-n + 9)
      예시 샘플
    Details

    포함된 타입

    • <dashndashdigit-ident>

      '-n-*'에 대한 ASCII 대소문자 구분 일치 항목인 <ident-token>이다. '*'는 일련의 하나 이상의 숫자이다.

    • <integer>

      <number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.

      • [HYPHEN-MINUS]?[0-9]

        0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.

      Details

      포함된 타입

      • <number-token>

        Number Token Railroad Diagrams

        + - digit . digit digit . digit e E + - digit
    • <n-dimension>

      유형 플래그 'integer'로 설정된 <dimension-token>이며 'n'에 대한 ASCII 대소문자 구분 일치 단위이다.

      Details

      포함된 타입

      • <dimension-token>

        <number> 값이 포함되어 있으며 추가로 'integer' 또는 'number'로 설정된 유형 플래그가 있다. 다르게 설정되지 않은 경우 유형 플래그의 기본값은 'integer'이다. 그리고 하나 이상의 코드 포인트로 구성된 단위가 추가로 있다.

        Dimension Token Railroad Diagrams

        <number-token> <ident-token>
    • <ndash-dimension>

      유형 플래그 'integer'로 설정된 <dimension-token>이며 'n-'에 대한 ASCII 대소문자 구분하지 않는 일치 단위이다.

      Details

      포함된 타입

      • <dimension-token>

        <number> 값이 포함되어 있으며 추가로 'integer' 또는 'number'로 설정된 유형 플래그가 있다. 다르게 설정되지 않은 경우 유형 플래그의 기본값은 'integer'이다. 그리고 하나 이상의 코드 포인트로 구성된 단위가 추가로 있다.

        Dimension Token Railroad Diagrams

        <number-token> <ident-token>
        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<dimension-token>]
    • <ndashdigit-dimension>

      유형 플래그 'integer'로 설정된 <dimension-token>이며 'n-*'에 대한 ASCII 대소문자 구분하지 않는 일치 단위이다. '*'는 일련의 1 또는 더 많은 자리수를 의미한다.

      Details

      포함된 타입

      • <dimension-token>

        <number> 값이 포함되어 있으며 추가로 'integer' 또는 'number'로 설정된 유형 플래그가 있다. 다르게 설정되지 않은 경우 유형 플래그의 기본값은 'integer'이다. 그리고 하나 이상의 코드 포인트로 구성된 단위가 추가로 있다.

        Dimension Token Railroad Diagrams

        <number-token> <ident-token>
    • <ndashdigit-ident>

      'n-*'에 대한 ASCII 대소문자 구분 일치 항목인 <ident-token>이다. '*'는 일련의 하나 이상의 숫자이다.

      Details

      포함된 타입

      • <ident-token>

        Ident Token Railroad Diagrams

        -- - a-z A-Z _ or non-ASCII escape a-z A-Z 0-9 _ - or non-ASCII escape
    • <signed-integer>

      유형 플래그가 'integer'인 <number-token>이며 '+' 또는 '-'로 시작한다.

      Details

      포함된 타입

      • <number-token>

        Number Token Railroad Diagrams

        + - digit . digit digit . digit e E + - digit
        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<number-token>]
    • <signless-integer>

      유형 플래그가 'integer'인 <number-token>이며 숫자로 시작한다.

      Details

      포함된 타입

      • <number-token>

        Number Token Railroad Diagrams

        + - digit . digit digit . digit e E + - digit

    사용되는 키워드

    • even

      An+B 공식에서 A는 2이고 B는 0이다. 짝수번째를 의미한다.

    • n

      0부터 시작하는 음수가 아닌 모든 정수를 의미한다.

    • odd

      An+B 공식에서 A는 2이고 B는 1이다. 홀수번째를 의미한다.

구문

Selectors Level 4
span:nth-of-type(2)

span 태그이면서 2번째 해당하는 요소를 선택자로 사용한다.

Example
Selectors Level 4
li:nth-of-type(-n+3)

li 타입이면서 처음부터 3번째까지 해당되는 요소를 선택자로 사용한다.

Example

버전 명세

Modules
Module NameStatusSummary
Selectors Level 4

Last review date: 2023-2-23

기술 문서

순서에 따른 가상 클래스 선택자

:nth-child(odd)

대상 요소들 중에서 홀수번째 순서에 해당하는 모든 요소들을 선택자로 사용한다.

:nth-child(even)

대상 요소들 중에서 짝수번째 순서에 해당하는 모든 요소들을 선택자로 사용한다.

:nth-child(number)

대상 요소들 중에서 숫자로 지정된 순서에 해당하는 요소를 선택자로 사용한다.

:nth-child(5n)

대상 요소들 중에서 다섯번째(예를 들어)마다 순서에 해당하는 모든 요소들을 선택자로 사용한다. 

다음 아래의 공식과 동일하다.

5x1, 5x2, 5x3, ...

:nth-child(n+7)

대상 요소들 중에서 7번째(예를 들어)와 그 이후의 순서에 해당하는 모든 요소들을 선택자로 사용한다. 

다음 아래의 공식과 동일하다.

0+7, 1+7, 2+7, ...

:nth-child(3n+4)

위 예의 경우 대상 요소들 중에서 다음 공식에 따라 해당하는 모든 요소들을 선택자로 사용한다.

3x0+4, 3x1+4, 3x2+4, ...

:nth-child(-n+3)

위 예의 경우 대상 요소들 중에서 다음 공식에 따라 해당하는 모든 요소들을 선택자로 사용한다.

-0+3, -1+3, -2+3

:nth-child(n)

대상 요소 모두를 선택자로 사용한다.

:nth-child(n+7):nth-child(-n+14)

대상 요소들 중에서 7번째(예를 들어) 부터 14번째 까지의 모든 요소들을 선택자로 사용한다.

지원 웹브라우저