CSS nth-child 셀렉터 짝수&홀수 td만 스타일 주는 법

- nth-child 셀렉터 

• 원하는 n번째 요소만 스타일을 주고 싶으면 :nth-child(n) 사용
• 아래 코드는 cart-table 안에 있는 모든 td를 찾은 다음 2번째 나오는 td에만 color를 줍니다.

.cart-table td:nth-child(2) {
  color: red;
}

 

 

• 짝수로 등장하는 td에만 스타일 주는 법

.cart-table td:nth-child(even) {
  color: red;
}

 

 

• 홀수에 등장하는 td에만 스타일 주는법

.cart-table td:nth-child(even) {
  color: red;
}

 

 

• 3n + 1 이렇게 작성하면 (3의배수 +1) 번째 등장하는 요소에만 스타일

.cart-table td:nth-child(3n+1) {
  color: red;
}