jQuery nth-child() 선택자 질문합니다.

조회수 1068회

$('div:nth-child(2)').css('background','red') 로 적용시킨 모습입니다. div 두번째 자식 에게 적용시키려했는데 왜 section data-role=header 를 제외한 모든 자식에게 적용이 되는지 모르겠습니다

$('div:nth-child(1)').css('background','red') 으로 실행했을때는 div의 첫째 자식인 id=dee2 에 적용이 잘됩니다.

이미지

  • (•́ ✖ •̀)
    알 수 없는 사용자

1 답변

  • CSS에서 div:nth-child(2)를 지시하면 브라우저는 무슨 일을 해서 뭘 선택하느냐?

    1. 일단 전체 마크업에서 div를 다 찾습니다.
    2. div를 하나하나 검사해 봅니다. "이 요소의 바로 상위 요소의 바로 밑에 있는 모든 요소들 중에서, 이놈은 2번째로 등장한 놈인가? (이게 "형제 요소 중에서의 순서"의 뜻입니다.)
      • 그렇다면 이 div를 킵합니다.
      • 그렇지 않다면 이 div를 버립니다.
    3. 최종적으로 킵된 모든 div를 최종적으로 선택하여 돌려줍니다.

    주어진 코드에서 $('div:nth-child(2)')#dee1#dee3이 킵됩니다. 왜? #dee1은 상위 section[data-role=page] 밑에 있는 요소들 중에서 2번째로 나오는 요소이고, #dee3은 상위 #div1 밑에 있는 요소들 중에서 2번째로 나오는 요소이기 때문입니다. 백그라운드에 투명을 살짝 줘 보면 상황이 좀더 이해가 되실 겁니다.

    좀더 알아보세요.

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)