[CSS] 짝수 태그만 색 바꾸기 (nth-child)

nth-child를 이용해

짝수 태그만 선택해서 색을 바꿔보겠습니다.

 

 

---

1. 짝수 태그만 선택하기

①  기본 구조 만들기

짝수 태그를 선택하려면

태그가 여러 개 있어야 하겠죠.

 

원하시는 만큼 태그를 만들어주세요.

저는 <li> 태그를 이용해 만들었어요.

 

예시로 작성한 거라 똑같이 만들 필요는 없지만

궁금하신 분들을 위해아래쪽에 코드를 첨부해 두겠습니다.

 

---

/* 짝수번째 li 색 변경 홀수는 odd */
li:nth-child(even){
  background:#7D9D9C;
  color:#E4DCCF;
}

②  even

<li> 태그 중 짝수 태그만 선택하고 싶다면

li:nth-child(even)으로 짝수 태그만 선택 가능합니다.

 

기존 <li> 태그와 색을 반대로 넣어주었습니다.

 

even은 짝수를 뜻하는 영어단어입니다. 영어를 잘하면 코딩하기 편할 텐데 말이에요 그렇죠?

근데 영어공부 안 함.

 

---

li:nth-child(odd){
  background:#7D9D9C;
  color:#E4DCCF;
}

③ odd

반대로 홀수 태그를 선택하려면

홀수를 뜻하는 영단어 odd를 적어주시면 됩니다.

 

li:nth-child(odd) 이렇게요.

간단하죠?

 

선택자로 간단하게 홀수와 짝수 태그만 선택해 봅시다.

 

 

320x100

 

---

2. 예시 코드 보기

 

①  코드 보기

예시로 작성했던 코드와 미리 보기 화면입니다.

 

 

---

https://ssimplay.github.io/index.html

references

②  레퍼런스

더 많은 레퍼런스를 보고 싶으시다면

그동안 블로그에 올렸던 코드들을 모아둔

레퍼런스 사이트를 확인해 주세요.

 

---

 

-

 

-

 

 

 

 

---

이상으로 짝수 태그만 색 바꾸는 방법이었습니다.

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

 

 

[같이 보면 좋은 포스팅]

[coding/html + css] - [CSS] 글자(text)에 테두리 넣기

[CSS] 글자(text)에 테두리 넣기

[coding/html + css] - [CSS] 동작 천천히 만드는 애니메이션

[CSS] 동작 천천히 만드는 애니메이션

 

그럼 이만.

총총.