CSS / 선택자(Selector) / :nth-child(), :nth-last-child()

:nth-child(), :nth-last-child()

  • :nth-child()와 :nth-last-child()는 특정 순서에 있는 요소를 선택할 때 사용하는 선택자입니다.
  • :nth-child()는 앞에서부터 세고, :nth-last-child()는 뒤에서부터 셉니다.
  • 인터넷 익스플로러는 IE 9 이상에서 사용할 수 있습니다.

:nth-child()

:nth-child()는 형제 요소 중에서 특정 순서에 있는 요소를 선택할 때 사용합니다.

문법

  • a와 b는 정수입니다. 0과 음수도 가능합니다.
  • n에는 음이 아닌 정수, 즉 0, 1, 2, 3, …이 차례대로 대입됩니다.
  • an+b 대신에 even, odd를 넣을 수도 있습니다.

예제

n에 0, 1, 2, 3, …을 대입하면 3n+2은 2, 5, 8, 11, …이 됩니다. li 요소 중 그 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

a를 음수로 정하면 선택하는 요소의 개수를 정할 수 있습니다. n이 0일 때 5, n이 1일 때 3, n이 2일 때 1이므로, 세 개의 홀수번째 요소가 선택됩니다.

a가 0이면 n에 어떤 값이 들어가도 b입니다. 0n+b라고 해도 되고, 그냥 b만 써도 됩니다. 위와 같이 하면 5번째 요소가 선택됩니다.

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

:nth-last-child()

:nth-last-child()는 형제 요소 중에서 특정 순서에 있는 요소를 선택할 때 사용합니다. :nth-child()와 다른 점은 뒤에서 부터 센다는 것입니다.

문법

  • a와 b는 정수입니다. 0과 음수도 가능합니다.
  • n에는 음이 아닌 정수, 즉 0, 1, 2, 3, …이 차례대로 대입됩니다.
  • an+b 대신에 even, odd를 넣을 수도 있습니다.

예제

li 요소 중 뒤에서부터 3번째에 있는 것을 선택하고 빨간색으로 만듭니다.

n에 0, 1, 2, 3, …을 대입하면 2n은 0, 2, 4, 6, …이 됩니다. li 요소 중 뒤에서부터 그 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

n에 0, 1, 2, 3, …을 대입하면 3n-1은 -1, 2, 5, 8, …이 됩니다. li 요소 중 뒤에서부터 그 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

n에 0, 1, 2, 3, …을 대입하면 n+8은 8, 9, 10, …이 됩니다. li 요소 중 뒤에서부터 그 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

li 요소 중 뒤에서부터 짝수번째 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

li 요소 중 뒤에서부터 홀수번째 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

CSS 강좌