CSS nth-child 셀렉터

 

CSS nth-child 간단 정리

• :nth-child(n) ➡ 원하는 n번째 요소만 스타일을 줄 수 있음
• :nth-child(even) ➡ 짝수
• :nth-child(odd) ➡ 홀수
• :nth-child(3n + 0)   ➡ 3의 배수

 

 

 

 

 

 

 

 

      .box {
        width: 100px;
        height: 100px;
        background: #fff;
        border: 1px solid #000;
      }
	  .box:nth-child(1) {
        background-color: #1971c2;
      }
      .box:nth-child(even) {
        background-color: #e64980;
      }

 

    <div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>