CSS 원하는 순서 및 홀수, 짝수에만 스타일

■ html 파일에서 css 파일 import
css에서 홀수 번째에 스타일을 주고 싶을 때는 nth-child(odd), 짝수 번째에 스타일을 주고 싶을 때는 :nth-child(even), 원하는 임의의 순서에 스타일을 주고 싶을 때는 nth-child(순서)를 사용한다.
 
 
 

■ 외부 CSS파일 예제

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<head>
<title></title>
<style>
.bgColors {
  border: 1px double #7F9DB9;
  font-size: 22px;
  width : 500px;
}
.bgColors:nth-child(even) {
  background-color : #ccff99
}
.bgColors:nth-child(odd) {
  background-color : #66cc00
}
.bgColors:nth-child(6) {
  background-color : #cc00cc
}
</style>
</head>
<body>
  <h1>
    CSS Odd, Even<br/>
  </h1>
  <hr/>
  <div class="bgColors">111 Odd</div>
  <div class="bgColors">222 Even</div>
  <div class="bgColors">333 Odd</div>
  <div class="bgColors">444 Even</div>
  <div class="bgColors">555 Odd</div>
  <div class="bgColors">666 Even</div>
  <div class="bgColors">777 Odd</div>
</body>
</html>

 
 
 

■ CSS 원하는 순서 및 홀수, 짝수에만 스타일 실행결과