계층 선택자

1. 계층 선택자

1.1 선택자

종류	예시	설명
하위 요소 선택자	$("div ul")	모든 자식 요소를 선택
자식 요소 선택자	$("div > ul")	첫 번째 자식 요소만 선택
형제 요소 선택자	$("div + p")	선택한 요소의 다음 형제 요소를 선택
형제들 요소 선택자	$("div ~ p")	선택한 요소의 다음 형제 요소를 모두 선택

//계층 선택자(선택자) 
$("div ul").css({"border":"1px dashed #a51a3d","background":"#f9f2f4"});
$("div > ul").css({"border":"1px dashed #a51a3d","background":"#f9f2f4"});
$(".list05 + li").css({"border":"1px dashed #a51a3d","background":"#f9f2f4"});
$(".list05 ~ li").css({"border":"1px dashed #a51a3d","background":"#f9f2f4"});

1.2 메서드

종류	예시	설명
부모 요소 선택자	$("선택자").parent()	선택한 요소의 부모 요소를 선택
부모들 요소 선택자	$("선택자").parents()	선택한 요소의 모든 부모 요소를 선택
자식 요소들 선택자	$("선택자").children()	선택한 요소의 모든 자식 요소를 선택
형제(이전) 요소 선택자	$("선택자").prev()	선택한 요소의 형제(이전) 요소를 선택
형제(이전)들 요소 선택자	$("선택자").prevAll()	선택한 요소의 형제(이전)들 요소를 선택
형제(다음) 요소 선택자	$("선택자").next()	선택한 요소의 형제(다음) 요소를 선택
형제(다음)들 요소 선택자	$("선택자").nextAll()	선택한 요소의 형제(다음)들 요소를 선택
전체 형제 요소 선택자	$("선택자").siblings()	선택한 요소의 모든 형제들 요소를 선택

//계층 선택자(메서드) 
$("#list1").parent().css({"border":"1px dashed #a51a3d","background":"#f9f2f4"});
$(".list").parents().css({"border":"1px dashed #a51a3d","background":"#f9f2f4"});
$(".list10").children().css({"border":"1px dashed #a51a3d","background":"#f9f2f4"});
$(".list05").prev().css({"border":"1px dashed #a51a3d","background":"#f9f2f4"});
$(".list05").prevAll().css({"border":"1px dashed #a51a3d","background":"#f9f2f4"});
$(".list05").next().css({"border":"1px dashed #a51a3d","background":"#f9f2f4"});
$(".list05").nextAll().css({"border":"1px dashed #a51a3d","background":"#f9f2f4"});
$(".list05").siblings().css({"border":"1px dashed #a51a3d","background":"#f9f2f4"});