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)
를 지시하면 브라우저는 무슨 일을 해서 뭘 선택하느냐?- 일단 전체 마크업에서
div
를 다 찾습니다. - 각
div
를 하나하나 검사해 봅니다. "이 요소의 바로 상위 요소의 바로 밑에 있는 모든 요소들 중에서, 이놈은2
번째로 등장한 놈인가? (이게 "형제 요소 중에서의 순서"의 뜻입니다.)- 그렇다면 이
div
를 킵합니다. - 그렇지 않다면 이
div
를 버립니다.
- 그렇다면 이
- 최종적으로 킵된 모든
div
를 최종적으로 선택하여 돌려줍니다.
주어진 코드에서
$('div:nth-child(2)')
는#dee1
과#dee3
이 킵됩니다. 왜?#dee1
은 상위section[data-role=page]
밑에 있는 요소들 중에서 2번째로 나오는 요소이고,#dee3
은 상위#div1
밑에 있는 요소들 중에서 2번째로 나오는 요소이기 때문입니다. 백그라운드에 투명을 살짝 줘 보면 상황이 좀더 이해가 되실 겁니다.좀더 알아보세요.
- 일단 전체 마크업에서
댓글 입력