보통 한 칸의 공백 문자로 표현하는 자손 결합자(
)는 두 개의 선택자를 조합하여, 뒤쪽 선택자 요소의 조상(부모, 부모의 부모, 부모의 부모의 부모...)에 앞쪽 선택자 요소가 존재할 경우 선택합니다. 자손 결합자를 활용하는 선택자를 자손 선택자라고 부릅니다.
/* List items that are descendants of the "my-things" list */
ul.my-things li {
margin: 2em;
}
기술적으로, 자손 결합자는 하나 이상의 CSS 공백 문자이므로 스페이스 외에도 캐리지 리턴, 폼 피드, 새 줄, 탭 문자도 해당합니다. 또한 결합자를 구성하는 공백 문자는 CSS 주석을 임의의 개수만큼 포함할 수 있습니다.
구문
selector1 selector2 { /* property declarations */ }
예제
CSS
li {
list-style-type: disc;
}
li li {
list-style-type: circle;
}
HTML
<ul>
<li>
<div>Item 1</div>
<ul>
<li>Subitem A</li>
<li>Subitem B</li>
</ul>
</li>
<li>
<div>Item 2</div>
<ul>
<li>Subitem A</li>
<li>Subitem B</li>
</ul>
</li>
</ul>
결과
명세
Specification | Status | Comment |
---|---|---|
Selectors Level 4 The definition of 'descendant combinator' in that specification. |
Working Draft | |
Selectors Level 3 The definition of 'descendant combinator' in that specification. |
Recommendation | |
CSS Level 2 (Revision 1) The definition of 'descendant selectors' in that specification. |
Recommendation | |
CSS Level 1 The definition of 'contextual selectors' in that specification. |
Recommendation | Initial definition |
브라우저 호환성
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.