[HTML/CSS] 짝수/홀수 선택자 (nth-child, odd, even)

 

CSS의 요소 중 홀수 번째, 또는 짝수 번째 요소를 선택하는 방법입니다.

 

 

:nth-child()

형제 요소들 중 파라미터로 입력된 패턴에 따라, 요소를 선택합니다.

파라미터에는 다음과 같은 값들을 넣을 수 있습니다.

• 키워드
  • odd : 홀수 번째 요소를 선택합니다.
  • even : 짝수 번째 요소를 선택합니다.
• 함수
  • 예제 
    • 2n+1 : odd와 같습니다. 홀수 번째 요소를 선택하게 됩니다.
    • 2n : even과 같습니다. 짝수 번째 요소를 선택하게 됩니다.
    • 5n : 5의 배수 번째 요소를 선택합니다.
    • 7 : 7번째 요소를 선택합니다.
    • n : 모든 요소를 선택합니다.
    • 이 외에도 자유롭게 필요한 함수를 입력하여 원하는 요소를 선택할 수 있습니다.

 

  홀수, 짝수 선택자(odd, even)  

<ol>
  <li> 홀수 </li>
  <li> 짝수 </li>
  <li> 홀수 </li>
  <li> 짝수 </li>
  <li> 홀수 </li>
  <li> 짝수 </li>
  <li> 홀수 </li>
  <li> 짝수 </li>
</ol>

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

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

ol li:nth-child(odd)

odd 키워드를 사용하여 목록에서 홀수번째 요소를 선택하여 빨간색으로 변경하였습니다.

 

ol li:nth-child(even)

even 키워드를 사용하여 목록에서 짝수번재 요소를 선택하여 파란색으로 변경하였습니다.

 

 

 

  홀수, 짝수 선택자(2n+1, 2n)  

<ol>
  <li> 홀수 </li>
  <li> 짝수 </li>
  <li> 홀수 </li>
  <li> 짝수 </li>
  <li> 홀수 </li>
  <li> 짝수 </li>
  <li> 홀수 </li>
  <li> 짝수 </li>
</ol>

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

ol li:nth-child(2n) {
  color: blue;
}

위 예제와 같은 예제입니다.

odd, even 키워드 대신, 함수를 입력하였습니다.

 

ol li:nth-child(2n+1)

홀수 번째 요소를 선택합니다.

 

ol li:nth-child(2n)

짝수 번째 요소를 선택합니다.