CSS - 테이블 row 홀수 짝수 번째 태그에만 스타일 적용하기

 

오늘은 한줄짜리 아주 간단한 css 이지만 잊어버릴까봐 기록으로 남겨놓는다.

1, 3, 5번째 줄만 옅은 회색을 만들고 싶다면 ? 자 만들러가보자.

 

결과화면 미리보기 

아래처럼 홀수 번째 태그에만 색상이 적용되어있다.

 

---

CSS - 테이블 row 홀수 짝수 번째 태그에만 스타일 적용하기

 

HTML

<div>홀수</div>
<div>짝수</div>
<div>홀수</div>
<div>짝수</div>
<div>홀수</div>
<div>짝수</div>

 

CSS

div {
  background-color: white;
}
div:nth-child(2n+1) {
  background-color: gray; // 홀수만 적용
}

div:nth-child(2n) {
  background-color: gray; // 짝수만 적용
}

 

 

요즘엔 죽어라 하지만 정체되는 느낌을 받고 있다ㅠ 스스로에게 조금이라도 나아가고 있는 거라고 다독이며 포스팅을 써본다