의사 클래스 nth-child

의사 클래스 nth-child는 부모의 n번째 자식인 요소를 선택합니다.

문법

css선택자:nth-child(숫자 | odd | even | 표현식) {
  
}

값

값	설명
숫자	`1`부터 시작하는 양의 정수. 대상으로 할 요소의 번호를 지정합니다. 요소 번호는 `1`부터 시작합니다.
`odd`	홀수 번째 요소.
`even`	짝수 번째 요소.
표현식	모든 정수를 나타내는 문자 n을 사용하여 특별한 표현식을 만들 수 있습니다. n은 0(1이 아님)부터 무한대까지의 모든 정수를 나타냅니다. 따라서, `2n`는 모든 짝수 번호(두 번째부터 시작)를 의미합니다. 이것을 어떻게 이해할까요? `n`에 0부터 시작하는 숫자를 순차적으로 대입합니다: n = 0이면, 2n은 0을 줍니다 - 해당 요소는 없습니다(요소 번호는 1부터 시작). n = 1이면, 2n은 2를 줍니다 - 두 번째 요소. n = 2이면, 2n은 4를 줍니다 - 네 번째 요소. `3n`을 쓰면, 세 번째 요소부터 시작하여 모든 세 번째 요소가 됩니다.

예제

이 예제에서 우리는 부모의 4번째 자식인 li를 빨간색으로 만들 것입니다:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-child(4) {
  color: red;
}

Результат:

예제

이제 모든 짝수 번째 li를 빨간색으로 만들겠습니다:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-child(even) {
  color: red;
}

Результат:

예제

이제 모든 홀수 번째 li를 빨간색으로 만들겠습니다:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-child(odd) {
  color: red;
}

Результат:

예제

이제 세 번째 요소부터 시작하여 모든 세 번째 li를 빨간색으로 만들겠습니다:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-child(3n) {
  color: red;
}

Результат:

예제

선택자에서 요소의 범위를 지정할 수 있습니다. 예를 들어, 20개의 요소 목록이 있고 7번째부터 14번째 요소까지를 선택해야 한다고 가정해 보겠습니다. 다음과 같이 할 수 있습니다:

html<ol>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ol>

cssli:nth-child(n+7):nth-child(-n+14) {
  color: red;
}

Результат: