작성한 질문수 1

2

예를들어, 아래와 같은 목록이 있다고 한다면..

<ul>
    <li>아이템</li>
    <li>아이템</li>
    <li>아이템</li>
    <li>아이템</li>
    <li>아이템</li>
    <li>아이템</li>
    <li>아이템</li>
    <li>아이템</li>
    <li>아이템</li>
</ul>

두번째 li에만 특정 디자인을 적용한다든지,
짝수번째 li에 모두 특정 디자인을 적용한다든지 할 때 nth-child를 유용하게 사용할 수 있습니다.
짝수번째 li에 모두 노랑 배경색을 칠한다고 한다면,
li:nth-child(even) { background: yellow; }
(홀수라면) li:nth-child(odd) { background: yellow; }
이렇게만 하면 끝나는데,

특정 클래스를 사용한다면
<ul>
    <li>아이템</li>
    <li class="special">아이템</li>
    <li>아이템</li>
    <li class="special">아이템</li>
    <li>아이템</li>
   ....
</ul>
이런 식으로 모두 추가해주어야 하니까요~
꼭 nth-child를 써야한다는건 아니지만, 상황에 따라 더 편한 경우가 있어서 그럴 때에 쓴다고 생각하시면 됩니다.
nth-child의 괄호 안에는, 숫자 뿐만 아니라
nth-child(3n+1) 이런 식으로 수식도 들어갈 수 있어서 활용 범위가 무궁무진 하답니다.