From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/child_combinator/index.html | 92 ++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 files/ko/web/css/child_combinator/index.html (limited to 'files/ko/web/css/child_combinator') diff --git a/files/ko/web/css/child_combinator/index.html b/files/ko/web/css/child_combinator/index.html new file mode 100644 index 0000000000..dceec68d92 --- /dev/null +++ b/files/ko/web/css/child_combinator/index.html @@ -0,0 +1,92 @@ +--- +title: 자식 결합자 +slug: Web/CSS/Child_combinator +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Child_combinator +--- +
{{CSSRef("Selectors")}}
+ +

자식 결합자(>)는 두 개의 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>
+
+ +

결과

+ +

{{EmbedLiveSample("예제", "100%", 100)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#child-combinators", "child combinator")}}{{Spec2("CSS4 Selectors")}}
{{SpecName("CSS3 Selectors", "#child-combinators", "child combinators")}}{{Spec2("CSS3 Selectors")}}No change.
{{SpecName("CSS2.1", "selector.html#child-selectors", "child selectors")}}{{Spec2("CSS2.1")}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.selectors.child")}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf