스크린샷) 빨간 점선은 홀수번째 배경만 스타일은 부여하였음


# css 원하는 순서 및 홀수, 짝수에만 스타일css를 사용하여 스타일을 부여하는 경우 몇 번째 또는 홀수나 짝수에만 스타일을 추가하고 싶은 경우가 있습니다. 어떻게해야할까요?

이 경우 매우 유용한 선택자 방법으로 특정 순번이나 홀수, 짝수 요소에만 스타일을 부여하는 nth-child() 속성을 사용할 수 있습니다. 이 방법을 사용하여 게시판에서 일부 리스트에만 스타일을 줄 때도 많이 사용됩니다.

Element:nth-child(선택될 위치값)
Ex) p:nth-child(2n-1) { style code }


사용방법은 위와 같이 특정 요소의 css선택자에 :nth-child()를 추가합니다. 그럼 아래 예제를 참고하세요.



# nth-child() 속성 예제보기

우선 아래와 같은 소스코드가 있다고 생각해보겠습니다.
<body>
  <p>테스트 라인 1번</p>
  <p>테스트 라인 2번</p>
  <p>테스트 라인 3번</p>
  <p>테스트 라인 4번</p>
  <p>테스트 라인 5번</p>
</body>

연속된 p태그 5개가 보이시죠? 그럼 하나하나 적용해 볼까요? 아래는 아직 아무 스타일도 적용하지 않은 페이지의 모습입니다.

@ 적용되지 않은 모습

테스트 라인 1번
테스트 라인 2번
테스트 라인 3번
테스트 라인 4번
테스트 라인 5번


보시는 것처럼 아무런 스타일도 없습니다. 그럼 아래부터는 각각 다른 스타일을 적용해보도록 하겠습니다.


# 2n번째에 해당하는 모든 p태그에 적용 이번에는 2n번째에 해당하는 엘리먼트에 스타일을 추가하여 빨간색으로 표시해보겠습니다.
p:nth-child(2n) {
  color: red;
}

위 코드를 실행하면 아래와 같은 결과입니다.

테스트 라인 1번

테스트 라인 2번

테스트 라인 3번

테스트 라인 4번

테스트 라인 5번




! 홀수번째 엘리먼트에 적용 홀수번째 에만 스타일을 추가하는 방법을 알아봅니다. 아래의 css에서는 odd 값을 사용하여 홀수번에만 스타일이 추가됩니다.
p:nth-child(odd) {
  color: red;
}

코드를 실행할 경우 아래와 같이 홀수번째만 적용되어 출력됩니다.

테스트 라인 1번

테스트 라인 2번

테스트 라인 3번

테스트 라인 4번

테스트 라인 5번



! 짝수번째 엘리먼트에 적용

이번에는 홀수가 아닌 짝수번째에만 스타일을 지정하는 방법입니다. 아까와는 다르게 even 값을 사용합니다.
p:nth-child(even) {
  color: red;
}

코드를 수행하면 결과는 아래와 같이 짝수번째에만 적용되어 나타납니다.


테스트 라인 1번

테스트 라인 2번

테스트 라인 3번

테스트 라인 4번

테스트 라인 5번





! 3번째 해당하는 엘리먼트에 적용
이번에는 3번째 해당하는 엘리먼트에만 적용합니다.
p:nth-child(3n) {
  color: red;
}
코드 실행시 아래와 같이 스타일이 적용됩니다.

테스트 라인 1번

테스트 라인 2번

테스트 라인 3번

테스트 라인 4번

테스트 라인 5번

테스트 라인 6번




!!!!! 3n+2번째에 해당하는 요소에 적용
만약 3n+2에만 스타일을 적용하려면? 아래와 같이 css를 추가합니다.
p:nth-child(3n+2) {
  color: red;
}
코드의 실행결과는 아래와 같습니다.

테스트 라인 1번

테스트 라인 2번

테스트 라인 3번

테스트 라인 4번

테스트 라인 5번





! 처음부터 n번째까지 스타일을 적용 만약 처음부터 원하는 순번 n에 해당하는 위치까지 동일한 스타일 적용이 필요하다면 어떻게해야할까요? 이때는 마이너스를 기호를 사용하여 -n을 입력합니다. 아래 예제는 처음, 즉 위에서부터 3번째까지의 행에만 스타일을 적용한 예제입니다.
p:nth-child(-n+3) {
  color: red;
}

위 코드의 실행결과는 아래입니다.
테스트 라인 1번
테스트 라인 2번
테스트 라인 3번
테스트 라인 4번
테스트 라인 5번



# nth-child() 적용시 주의할 점은?해당하는 태그안에 다른 태그가 존재할 경우 nth-child() 속성은 적용되지 않습니다. 예를 들어 3번째 p태그에만 속성을 지정하고 싶은데...
<div>
  <h3>Test Tags</h3>
  <p>first</p>
  <p>second</p>
  <p>third</p>
</div>
위와 같이 서로 이웃하는 p태그 이외의 h2태그가 존재하는 경우 해당 속성은 적용이 되지 않는 점... 꼭 잊지 마세요! 하지만 이와 무관하게 스타일 지정이 가능한 방법이 있습니다. 바로 nth-of-type() 입니다.

참고로 위 속성은 IE8(인터넷 익스플로러 8) 이하에서는 호환되지 않으니 이 점도 참고하세요!


# 마치면서. 더 많은 정보 링크

여기까지 nth-child를 사용하는 다양한 방법을 알아보았습니다. css를 사용한 선택자 방법은 매우 다양합니다. 아래는 선택자와 관련된 다른 링크 정보입니다.

@ 공통선택자 * 사용하는 방법 >
http://webisfree.com/2014-01-31/[css]-공통선택자-(asterisk)-알아보기-그리고-활용방법

@ 속성 선택자를 사용하여 스타일 추가하는 방법 >
http://webisfree.com/2014-01-14/[css]-속성-선택자를-사용해-특정-속성을-가진-요소에-스타일-부여방법