You are on the editable version of MDN Web Docs

MDN 웹 문서 사용자로 보기: https://developer.mozilla.org/ko/docs/Web/CSS/Child_combinator

자식 결합자(>)는 두 개의 CSS 선택자 사이에 위치하여 뒤쪽 선택자의 요소가 앞쪽 선택자 요소의 바로 밑에 위치할 경우에만 선택합니다.

/* List items that are children of the "my-things" list */
ul.my-things > li {
  margin: 2em;
}

뒤쪽 선택자의 요소는 앞쪽 선택자 요소의 바로 아래에 위치해야 하므로, DOM 트리의 깊이에 상관하지 않고 아래의 모든 요소를 선택하는 자손 결합자보다 더 엄격합니다.

구문

selector1 > selector2 { style properties }

예제

CSS

span {
  background-color: white;
}

div > span {
  background-color: DodgerBlue;
}

HTML

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.</span>
  </span>
</div>
<span>Span #3, not in the div at all.</span>

결과

명세

Specification Status Comment
Selectors Level 4
The definition of 'child combinator' in that specification.
Working Draft
Selectors Level 3
The definition of 'child combinators' in that specification.
Recommendation No change.
CSS Level 2 (Revision 1)
The definition of 'child 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
Child combinator (A > B)Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 7Opera Full support 4Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

같이 보기

문서 태그 및 공헌자

태그: 
이 페이지의 공헌자: alattalatta
최종 변경자: alattalatta,