Selectors

Draft
  • account_tree
  • bug_report

:nth-child()

같은 레벨(형제) 관계의 요소 그룹에서 인수로 지정한  순서에  해당하는 요소를 선택자로 사용한다.

설명

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

구문

:nth-child(numberorkeywordorformula) { css declarations; }기본형식CSS3
지정된 number(숫자) 또는 키워드 또는 formula(공식)의 순서를 갖는 요소를 선택자로 사용한다.
li:nth-child(2)사용 예CSS3
li 요소 중에서 2번째 순서를 갖는 요소를 선택자로 사용한다.
li:nth-child(odd)사용 예CSS3
li 요소 중에서 odd(홀수) 순서를 갖는 요소를 선택자로 사용한다.
li:nth-child(even)사용 예CSS3

li 요소 중에서 even(짝수) 순서를 갖는 요소를 선택자로 사용한다.

li:nth-child(3n)사용 예CSS3
순서가 3번째 마다 해당되는 요소를 선택자로 사용한다.
li:nth-child(n+3)사용 예CSS3

li 요소중에서 3번째 해당되는 요소와 그 이후의 모든 요소를 선택자로 사용한다.

li:nth-child(3n+2)기본형식CSS3

li 요소 중에서 2, 5, 8, .. 번째 요소들을 선택자로 사용한다.

기술 문서

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

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

지원 웹브라우저