:nth-child

해당 부모 요소의 n번째 자식 요소인 요소에 스타일을 하나 이상 적용합니다.

구문

:nth-child (n) { sRules }

가능한 값

n

공통 부모 요소를 가진 모든 n 요소를 선택하는 식

sRules

CSS(Cascading Style Sheet) 특성/값 쌍을 하나 이상 지정하는 문자열

설명

선택되는 요소를 결정하는 식은 다음 형식 중 하나를 사용할 수 있습니다.

• even : 짝수인 요소 인스턴스를 선택합니다.

• odd : 홀수인 요소 인스턴스를 선택합니다.

• a**n+**b: a+b 인스턴스로 시작하는 요소의 모든 a 인스턴스를 선택합니다.

• an-b: a-b 인스턴스로 시작하는 요소의 모든 a 인스턴스를 선택합니다.

:nth-child 의사 클래스는 구조적 의사 클래스입니다. 구조적 의사 클래스는 단순 선택기 또는 조합기를 사용하여 선택될 수 없는 문서 트리의 추가 정보를 기반으로 하는 선택을 가능하게 합니다.

예

다음 스타일 규칙은 문서 트리에 있는 각 H1 앞과 뒤에 중괄호를 삽입합니다.

p:nth-child(3n+1)   /* selects every third paragraph, starting from paragraph one */
p:nth-child(4n-1)   /* selects every fourth paragraph, starting from paragraph three */
p:nth-child(5n+0)   /* selects every fifth paragraph, starting from paragraph five.

표준 정보

이 의사 클래스는 CSS Selectors Level 3(CSS 선택기 수준 3) 에 정의되어 있습니다.

적용 대상

a , abbr , acronym , address , b , big , blockquote , body , caption , center , cite , code , col , colgroup , dd , dfn , dir , div , dl , dt , em , form , hn , html , i , img , input , input type=button , input type=checkbox , input type=file , input type=hidden , input type=image , input type=password , input type=radio , input type=reset , input type=submit , input type=text , kbd , label , legend , li , listing , marquee , menu , ol , p , plaintext , pre , s , samp , select , small , span , strike , strong , sub , sup , table , tbody , td , textarea , tfoot , th , thead , tr , tt , u , ul , var , xmp

참조 항목

개념

:empty
:first-child
:first-of-type
:last-child
:last-of-type
:nth-last-child
:nth-last-of-type
:nth-of-type
:only-child
:only-of-type
:root