nth-child Selector

nth-child 셀렉터

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

여러 요소를 찾은 다음 원하는 n번째 요소만 스타일을 주고 싶다면 :nth-child(n)을 뒤에 붙여주면 된다. 저 위의 코드는 .cart-table의 td 전체중에 2번째 td 태그에 스타일을 주겠다는 의미로 볼 수 있다. table이나 li 태그처럼 여러개가 나열 되는 경우에 이용하면 유용하게 사용할 수 있다.

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

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

(even)의 경우 짝수의 경우에만, odd의 경우 홀수에만 줄 수도 있다. 혹은 내가 원하는 규칙을 만들어서 그에 해당하는 것들만 스타일을 줄 수도 있다.

td 여러개를 합치고 싶으면

<td colspan="4"></td>

colspan에 원하는 숫자를 넣으면 그 숫자만큼 다른 열의 셀을 합칠 수 있다.