css의 nth-child 셀렉터

바다구름·2023년 8월 3일

html & css

목록 보기
2/9

1. 원하는 항목 선택

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

여러 요소를 찾은 다음
원하는 n번째 요소만 스타일을 주고 싶으면 :nth-child(n) 이걸 뒤에 붙여주면 됩니다.


2. 홀수, 짝수 항목 선택

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

이러면 짝수로 등장하는 td에만 스타일을 줄 수도 있고
(odd라고 쓰면 홀수)


3. n배수 항목 선택

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

이러면 3의 배수로 등장하는 3,6,9,12.. 번째 등장하는 요소에만 스타일을 줄 수 있습니다.
3n + 1 이렇게 작성하면 (3의배수 +1) 번째 등장하는 요소에만 스타일을 줄 수 있습니다.

profile
안녕하세요.

0개의 댓글