[HTML/CSS]홀수, 짝수 선택자

 

 

안녕하세요 무택입니다 :)

오늘 알아볼 기능은 CSS의 홀수, 짝수 선택자 기능입니다. css를 작성하다 보면 짝수 항목에만 효과를 줘야 될 때가 더러 있습니다. 이럴 때 사용하면 좋은 코드로 상황에 따라 활용성이 많다고 생각합니다.

 

# 한장 요약

 

 

# code

-

<style>
  *{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  ul>li{
    width: 100px;
    height: 100px;
    float: left;
  }
  
  /*홀수 선택자*/
  ul>li:nth-child(odd){ 
    background-color: #0054ff;
  }
  /*짝수 선택자*/
  ul>li:nth-child(even){
    background-color: #ff00ff;
  }
</style>

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

 

 

코드 예제

See the Pen [css]홀수, 짝수 선택자 by TytanLee (@TytanLee) on CodePen.

 

 

 

 

# 다른 코드

홀수 선택자는 :nth-child(1n)

짝수 선택자는 :nth-child(2n)

도 마찬가지로 적용이 되니 상황에 따라 사용하시면 됩니다.