[HTML/CSS] 테이블의 홀수행/짝수행에 스타일 적용하기 (:nth-child, odd, even)

 

:nth-child()

nth-child() 는 

파라미터로 입력 된 패턴의 순서에 따라 요소를 선택하는 선택자입니다.

이 선택자를 이용하여, 테이블의 짝수 또는 홀수 행에만 스타일을 적용할 수 있습니다.

 

파라미터로는 함수 또는 지정된 키워드를 입력할 수 있습니다.

1. 함수
   • 예제
     • 2n+1 : 홀수 번째 요소를 선택합니다.
     • 2n : 짝수 번째 요소를 선택합니다.
     • 5 : 5번째 요소를 선택합니다.
     • 5n : 5의 배수 번째가 되는 요소를 선택합니다.
     • 이런 식으로 원하는 함수를 입력할 수 있습니다.
2. 키워드
   • odd : 홀수 번째 요소를 선택합니다.
   • even : 짝수 번째 요소를 선택합니다.

 

 

  테이블의 홀수 행에만 스타일 적용하기  

<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anna</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Tina</td>
      <td>30</td>
    </tr>
    <tr>
      <td>David</td>
      <td>33</td>
    </tr>
  </tbody>
</table>
  

table, td, th {
  border: 1px solid black;
  border-collapse: collapse;
}

tbody tr:nth-child(odd) {
    background-color: lightgray;
}

tbody tr:nth-child(odd) {

    background-color: lightgray;

}

tbody  하위의 tr 중, 홀수 번째 요소만 배경색을 회색으로 변경하였습니다.

 

파라미터로 2n+1 을 입력하여도, 같은 결과가 나옵니다.