Selectors

Draft
  • account_tree
  • bug_report

:nth-of-type()

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

설명

숫자, 키워드, 공식을 인수로 사용할 수 있다.

구문

:nth-of-type(numberorkeywordorformula) { css declarations; }기본형식CSS3
자식 요소로서 선택자로 사용된 요소와 동일 타입을 기준으로 인수로 지정된 number(숫자) 또는 키워드 또는 formula(공식)의 순서를 갖는 요소를 선택자로 사용한다.
span:nth-of-type(2)사용 예CSS3
span 태그이면서 2번째 해당하는 요소를 선택자로 사용한다.
li:nth-of-type(-n+3)사용 예CSS3
li 타입이면서 처음부터 3번째까지 해당되는 요소를 선택자로 사용한다.

기술 문서

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

: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번째 까지의 모든 요소들을 선택자로 사용한다.

지원 웹브라우저