CSS공부 ( nth-child )

개발을 하던 중 중복되는 디자인을 좀 편하게 사용하거나 특정 요소만 선택해서 css를 적용했으면 좋겠다고 생각해서 찾아보다가
nth-child라는 의사 클래스를 발견해서 간단하게 해결할 수 있었다.

`:nth-child`는 CSS에서 특정 부모 요소의 자식 요소 중 n번째 요소를 선택할 때 사용하는 의사 클래스입니다.  
수열 공식(2n, 2n+1 등)을 이용해 짝수, 홀수 또는 특정 패턴으로 요소를 선택할 수 있습니다.


주요 사용 예시
- `:nth-child(2)` → 부모 안의 두 번째 요소를 선택
- `:nth-child(2n)` → 부모 안의 짝수 번째 요소를 선택
- `:nth-child(2n+1)` → 부모 안의 홀수 번째 요소를 선택
- `:nth-child(3n)` → 3의 배수 번째 요소를 선택

 

예시 코드: HTML

<ul>
  <li>아이템 1</li>
  <li>아이템 2</li>
  <li>아이템 3</li>
  <li>아이템 4</li>
  <li>아이템 5</li>
</ul>

 

예시 코드: CSS

/* 짝수 번째 <li> 요소만 파란색 */
li:nth-child(2n) {
  color: blue;
}

/* 홀수 번째 <li> 요소만 빨간색 */
li:nth-child(2n+1) {
  color: red;
}

/* 3의 배수 번째 <li> 요소만 굵게 */
li:nth-child(3n) {
  font-weight: bold;
}

참조 페이지:
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

:nth-child() - CSS: Cascading Style Sheets | MDN