CSS 강좌 | 선택자 > 가상 클래스(Pseudo-classes) > :nth-child

Category

:nth-child

:nth-child는 형제 요소 중에서 규칙을 만족하는 요소를 선택할 때 사용합니다.

그 규칙은 등차수열입니다. 특정 수로 시작해서 일정한 값을 더하거나 빼는 수열이죠. 즉, 일정한 간격으로 요소를 선택할 수 있습니다. 그 간격을 0으로 정하면 특정 위치에 있는 요소만 선택할 수도 있습니다.

문법

selector:nth-child( an+b ){ ... };

형제 요소 중에서 an+b번째 있는 요소를 선택합니다.

an+b에서 a와 b는 정수입니다. n에는 0, 1, 2, 3, …이 차례대로 입력됩니다.

예를 들어 3n+2로 정하면

3 × 0 + 2 = 2, 3 × 1 + 2 = 5, 3 × 2 + 2 = 8, 3 × 3 + 2 = 11, …

이므로 2로 시작해서 3씩 커지는 2, 5, 8, 11, 14, 17, 20, …이 됩니다.

기본 예제

순서 있는 목록에서 홀수번째 li 요소를 선택하여 글자를 빨간색으로 만드는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      li:nth-child( 2n+1 ) {
        color: red;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
      <li>Seven</li>
      <li>Eight</li>
      <li>Nine</li>
    </ol>
  </body>
</html>

2n+1을 2n-1로 바꾸면 n이 0일 때 -1이 됩니다. -1번째 요소는 없으므로 무시됩니다. 즉 다음과 같이 해도 결과는 변하지 않습니다.

li:nth-child( 2n-1 ) {
  color: red;
}

a가 음수라면

a를 음수로 정하면 선택하는 요소의 개수를 정할 수 있습니다.

li:nth-child( -2n+5 ) {
  color: red;
}

n이 0일 때 5, n이 1일 때 3, n이 2일 때 1이므로, 세 개의 홀수번째 요소가 선택됩니다.

a가 0이라면

a가 0이면 n에 어떤 값이 들어가도 b입니다. 0n+b라고 해도 되고, 그냥 b만 써도 됩니다.

li:nth-child( 5 ) {
  color: red;
}

위와 같이 하면 5번째 요소가 선택됩니다.

odd와 even

an+b 대신에 odd을 쓰면 홀수번째 요소가, even을 적으면 짝수번째 요소가 선택됩니다.

li:nth-child( odd ) {
  color: red;
}
li:nth-child( even ) {
  color: blue;
}

주의할 점

li.jb:nth-child( odd )라고 했을 때 해석에 주의합니다.

jb를 클래스 값으로 가지는 li 요소 중 홀수번째 요소를 선택하는 것이 아니라, li 요소의 홀수번째 요소 중 jb를 클래스 값으로 가지는 요소를 선택합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      li.jb:nth-child( odd ) {
        color: red;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li class="jb">Four</li>
      <li class="jb">Five</li>
      <li class="jb">Six</li>
      <li class="jb">Seven</li>
      <li class="jb">Eight</li>
      <li class="jb">Nine</li>
    </ol>
  </body>
</html>

브라우저 지원

  • Chrome : 4.0+
  • Firefox : 3.5+
  • Internet Explorer : 9.0+
  • Opera : 9.6+
  • Safari : 3.2+

참고

Created on 2017-10-25 12:21 | Updated on 2017-10-25 12:21

이 글을 공유하기

Kakao