• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

안녕하세요 선생님 질문드립니다.

20.06.07 14:47 작성 조회수 98

3

'.door:nth-child(2) .ilbuni' 로 선택하면 2번째 일분이가 선택되는데

'.ilbuni:nth-child(2)'로 하면 선택되지 않는 이유는 무엇인가요?

답변 1

답변을 작성해보세요.

1

.ilbuni:nth-child(2)는, 일분이가 같은 레벨에 여러개 있을 경우 두번째를 선택하는 것이기 때문입니다^^

 <div>
    <div class="ilbuni"></div>
    <div class="ilbuni"></div>
    <div class="ilbuni"></div>
</div>

이런 식의 구조라면 .ilbuni:nth-child(2) 이렇게 두번째 일분이를 선택할 수 있지만,

 <div class="door">
    <div class="ilbuni"></div>
</div>
 <div class="door">
    <div class="ilbuni"></div>
</div>
 <div class="door">
    <div class="ilbuni"></div>
</div>

이런 구조이기 때문에 두번째 door를 선택 후, 그 자식인 ilbuni를 선택하는 것이죠!
이 구조에서는 각 일분이들은 형제는 없이 단독으로 있는 것입니다.