1. nth-child selector
.cart-table td:nth-child(2) {
color: red;
}
- 원하는 n번째 요소만 스타일을 주고 싶으면 :nth-child(n) 이걸 뒤에 붙여주면 됩니다. 위의 코드는 그래서 .cart-table 안에 있는 모든 td를 찾은 다음 2번째 나오는 td에만 color를 줄 수 있습니다.
.cart-table td:nth-child(even) {
color: red;
}
.cart-table td:nth-child(3n+0) {
color: red;
}
- 이러면 3의 배수로 등장하는 3,6,9,12.. 번째 등장하는 요소에만 스타일을 줄 수 있습니다.
3n + 1 이렇게 작성하면 (3의배수 +1) 번째 등장하는 요소에만 스타일을 줄 수 있습니다.