TIL 07 | nth-child가 안 먹히는 이유, span과 i태그

nth-child가 안 먹혀요! 질문 전에 꼭 확인해야 하는 것

선택자 :nth-child는 형제(siblings) 요소 중에서 n번째 형제를 선택한다.
(관련글 https://velog.io/@1703979/css6)

아래의 구조에서, .parents라는 부모 div안의 p 3개,div 2개가 서로 형제이며 nth-child는 이들 중에서 n번째를 선택한다. 즉 [1,2,3,4,5]가 형제(a)이고 [6,7,8,9,10]이 형제(b)이다. a와 b는 형제가 아님.

    <div class="parents">
      <p>1</p>
      <div>2</div>
      <p>3</p>
      <div>4</div>
      <p>5</p>
    </div>
    <div class="parents">
      <p>6</p>
      <div>7</div>
      <p>8</p>
      <div>9</div>
      <p>10</p>
    </div>

.parents div:nth-child(2)가 가리키는 것은 각 .parents div안의 두번째 줄, 즉 형제들 중 2번째에 위치한 div이다. 형제들 중 div 2명 중 둘째를 가리키는 것이 아니다.

    <div class="parents">
      <p>1</p>
      <div></div> <-★
      <p>2</p>
      <div></div>
      <p>3</p>
    </div>
    <div class="parents">
      <p>1</p>
      <div></div> <-★
      <p>2</p>
      <div></div>
      <p>3</p>
    </div>

다시말해 .parents div:nth-child(4)가 가리키는 것은

    <div class="parents">
      <p>1</p>
      <div></div> 
      <p>2</p>
      <div></div>
      <p>3</p>
    </div>
    <div class="parents">
      <p>1</p>
      <div></div> 
      <p>2</p>
      <div></div> <-★
      <p>3</p>
    </div>

가 아니라

    <div class="parents">
      <p>1</p>
      <div></div> 
      <p>2</p>
      <div></div> <-★
      <p>3</p>
    </div>
    <div class="parents">
      <p>1</p>
      <div></div> 
      <p>2</p>
      <div></div> <-★
      <p>3</p>
    </div>

인 것이다.

같은 맥락으로 .parents div:nth-child(5)나 .parents div:nth-child(6)을 입력해 CSS를 적용해도 바뀌는 것이 없다. 존재하지 않는 것들이기 때문임

5번째 child는 div가 아니라 p이므로 p:nth-child(5)라고 적어야 하며, 6번째 child는 아예 존재하지 않는다. 위 예제에서 한 부모 아래 형제는 다섯이다.

first-child, last-child도 마찬가지다. 모두 형제요소에서 작용한다.

.parents:first-child p:nth-child(3)는
두 개의 parents 중 첫번째 parents를 선택하고, 그 안에서 세번째 자식 p를 선택한다. 첫번째 parents div의 "3"이 선택되는 것이 아니라 "2"가 선택된다.

    <div class="parents">
      <p>1</p>
      <div></div> 
      <p>2</p>   <-★
      <div></div>
      <p>3</p>
    </div>
    <div class="parents">
      <p>1</p>
      <div></div> 
      <p>2</p>
      <div></div> 
      <p>3</p>
    </div>

형제 요소 중 div끼리만 순서를 정해 지칭하고 싶다면 nth-child가 아닌 nth-of-type를 사용해야 한다.

아이콘을 span으로 묶는 이유

<span><i class="아이콘"></i></span>
이런 상황에서는 span을 제거하고 i를 지칭하여 CSS를 적용해도 문제가 없음

<span><i class="아이콘"></i><i class="아이콘"></i><i class="아이콘"></i><i class="아이콘"></i></span>
그렇지만 이렇게 아이콘이 겁나 많이 있거나

<span><i class="아이콘"></i>예제 텍스트입니다</span>
2개 이상의 요소가 있는 경우

한꺼번에 처리하기 위해 같은 inline요소인 span으로 묶기도 한다. (div,p는 block)