자손 결합자

보통 한 칸의 공백 문자로 표현하는 자손 결합자( )는 두 개의 선택자를 조합하여, 뒤쪽 선택자 요소의 조상(부모, 부모의 부모, 부모의 부모의 부모...)에 앞쪽 선택자 요소가 존재할 경우 선택합니다. 자손 결합자를 활용하는 선택자를 자손 선택자라고 부릅니다.

/* 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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Descendant combinator (A B)Chrome Full support 1
Full support 1
Full support 61
Notes
Notes >>> is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support YesSafari Full support 1WebView Android Full support ≤37
Full support ≤37
Full support 61
Notes
Notes >>> is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
Chrome Android Full support 18
Full support 18
Full support 61
Notes
Notes >>> is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
Full support 1.0
Full support 8.0
Notes
Notes >>> is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
A >> B syntax
Deprecated
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support 10 — 11.1WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support 10 — 11.3Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.

같이 보기