From 791aaf0def7cc344803da3093d77561c9e5d279e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 6 Jan 2022 09:38:40 +0900 Subject: 2021/12/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/child_combinator/index.md | 126 +++++++++++++---------------- 1 file changed, 54 insertions(+), 72 deletions(-) diff --git a/files/ja/web/css/child_combinator/index.md b/files/ja/web/css/child_combinator/index.md index 49c1bde803..1c5520a60b 100644 --- a/files/ja/web/css/child_combinator/index.md +++ b/files/ja/web/css/child_combinator/index.md @@ -3,89 +3,71 @@ title: 子結合子 slug: Web/CSS/Child_combinator tags: - CSS - - Reference - - Selector - - Selectors + - リファレンス + - セレクター +browser-compat: css.selectors.child translation_of: Web/CSS/Child_combinator --- -
{{CSSRef("Selectors")}}
+{{CSSRef("Selectors")}} -

子結合子 (child combinator) (>) は2つの CSS セレクターの間に配置されます。2つ目のセレクターが1つ目のセレクターの直接の子要素の場合にのみマッチします。

+**子結合子** (child combinator) (`>``) は 2 つの CSS セレクターの間に配置されます。 2 つ目のセレクターが 1 つ目のセレクターの直接の子要素の場合にのみ一致します。 -
/* "my-things"クラスを持つリストの子要素であるリスト項目 */
-ul.my-things > li {
+```css
+/* "my-things"クラスを持つリストの子要素であるリスト項目 */
+ul.my-things > li {
   margin: 2em;
-}
+} +``` -

2つ目のセレクターに一致する要素は、1つ目のセレクターに一致する要素の直接の子要素でなければなりません。これは、子孫結合子が1つ目のセレクターに一致する要素が祖先に存在する2つ目のセレクターに一致するすべての要素に一致するのに比べて厳密です。

+2 つ目のセレクターに一致する要素は、 1 つ目のセレクターに一致する要素の直接の子要素でなければなりません。これは、[子孫結合子](/ja/docs/Web/CSS/Descendant_combinator)が 1 つ目のセレクターに一致する要素が祖先が存在する 2 つ目のセレクターに一致するすべての要素に一致するのに比べて厳密です。 -

構文

+## 構文 -
セレクター1 > セレクター2 { スタイルプロパティ }
-
+```css +セレクター1 > セレクター2 { スタイルプロパティ } +``` -

例

+## 例 -

CSS

+### CSS -
span {
-  background-color: white;
+```css
+span {
+  background-color: aqua;
 }
 
-div > span {
-  background-color: DodgerBlue;
+div > span {
+  background-color: yellow;
 }
-
- -

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("Examples", "100%", 100)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors", "#child-combinators", "child combinator")}}{{Spec2("CSS4 Selectors")}}
{{SpecName("CSS3 Selectors", "#child-combinators", "child combinators")}}{{Spec2("CSS3 Selectors")}}変更なし
{{SpecName("CSS2.1", "selector.html#child-selectors", "child selectors")}}{{Spec2("CSS2.1")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +``` + +### HTML + +```html +
+ Span #1, in the div. + Span #2, in the span that's in the div. + +
+Span #3, not in the div at all. +``` + +### 結果 + +{{EmbedLiveSample("Examples", "100%", 100)}} + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName("CSS4 Selectors", "#child-combinators", "child combinator")}} | {{Spec2("CSS4 Selectors")}} | | +| {{SpecName("CSS3 Selectors", "#child-combinators", "child combinators")}} | {{Spec2("CSS3 Selectors")}} | 変更なし | +| {{SpecName("CSS2.1", "selector.html#child-selectors", "child selectors")}} | {{Spec2("CSS2.1")}} | 初回定義 | + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [子孫結合子](/ja/docs/Web/CSS/Descendant_combinator) -- cgit v1.2.3-54-g00ecf