jQuery - 후손 선택자와 자손 선택자

1. 후손 선택자와 자손 선택자의 정의 

후손 선택자는 선택된 태그의 모든 하위 태그를 말합니다.

후손 선택자 표현식 : 선택자P 선택자E 

예시) $(".container ul")

=> <ul>와 <li> 태그 전체가 선택됩니다.

 

자손 선택자는 선택된 태그의 바로 아래의 하위 태그(자식)을 말합니다.

자손 선택자 표현식 : 선택자P > 선택자E 

예시) $(".container > ul")

=> <ul> 태그만 선택됩니다.

<div class="container">
	<h1> title </h1>
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

 

 

2. css에서의 후손 선택자와 자손 선택자

후손 선택자 css 표현식 

.container ul {
	background-color : "red"
}

=> ul 태그와 하위 태그인 li태그까지 css가 적용됩니다.

 

자손 선택자 css 표현식

.container > ul {
	background-color : "red"
}

=> ul 태그만 css가 적용됩니다.

 

 

 

3. 번외 다양한 방식으로 선택자 지정

패턴	의미
$('input[class]')	input 태그의 class 속성이 포함된 요소 E를 선택합니다.
$('input[class="test"]')	input 태그의 class 속성값이 'test'와 일치하는 요소 E를 선택합니다.
$('input[class~="test"]')	input 태그의 class 속성값이 'test'이 포함한 요소 E를 선택합니다.(공백으로 분리된 값이 일치해야 합니다.)
$('input[class^="test"]')	input 태그의 class 속성값이 'test'로 시작하는 요소 E를 선택합니다.
$('input[class$="test"]')	input 태그의 class 속성값이 'test'로 끝나는 요소 E를 선택합니다.
$('input[class*="test"]')	input 태그의 class 속성값이 'test'이 포함한 요소 E를 선택합니다.
$('input[class|="test"]')	input 태그의 class 속성값이 'test' 로 정확하게 일치하거나 'test-'로 시작하는 요소 E를 선택합니다.

 

---

참고 사이트

www.nextree.co.kr/p8468/

CSS: 선택자(Selector) 이해