본문 바로가기
JavaScript

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

by 새발개발JA 2022. 5. 13.
반응형

 

오늘은 한줄짜리 아주 간단한 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; // 짝수만 적용
}

 

 

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

 

 

반응형

댓글