Design Kits Blog

CSS의 nth-child 선택자는 HTML 요소의 순서를 기준으로 스타일을 적용할 때 사용됩니다. 

이 선택자를 사용하면 특정 패턴에 맞는 자식 요소를 선택하여 스타일을 지정할 수 있습니다.

nth-child는 다양한 형식으로 사용할 수 있으며, 숫자, 키워드 또는 수식을 사용하여 특정 요소를 선택합니다.

:nth-child(N)= 부모안에 모든 요소 중 N번째 요소

:first-child= 부모안에 모든 요소 중 첫번째 요소

:last-child= 부모안에 모든 요소 중 마지막 요소

A:nth-of-type(N)= 부모안에 A라는 요소 중 N번째 요소

A:first-of-type= 부모안에 A라는 요소 중 첫번째 요소

A:last-of-type= 부모안에 A라는 요소 중 마지막 요소

nth-child 

:nth-child(odd) = 홀수 선택

:nth-child(even) = 짝수 선택

:nth-child(1) = 첫번째 선택

:nth-child(2n) = 두번째 마다 선택

:nth-child(2n+1) = 첫번째 요소부터 2번째 마다 선택

:nth-child(2n+5) = 다섯번째 부터 2개 마다 선택

:nth-child(-2n+5) = 첫번째 요소부터 5번째 요소까지 2개 마다 선택

:nth-child(-n+5) = 앞에서부터 5개만 선택

:nth-child(n+4):nth-child(-n+7) = 선택자를 두번 사용하여 교집합인 요소만 선택할 수 있다.

nth-of-type

p:nth-of-type(1) = 부모안에 요소 중 첫번째 p요소 선택

p:nth-of-type(2n+1) = 부모안에 p요소 중 첫번째부터 2번째마다 선택

p:nth-of-type(n+2):nth-of-type(-n+5) = 선택자를 두번 사용하여 교집합인 요소만 선택할 수 있다.