From 81e89736914413e2b1807f7142eef313449c27ce Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 6 Jan 2022 08:56:29 +0900 Subject: セレクター結合子の記事を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/adjacent_sibling_combinator/index.html | 83 ---------------- .../web/css/adjacent_sibling_combinator/index.md | 83 ++++++++++++++++ files/ja/web/css/child_combinator/index.html | 91 ------------------ files/ja/web/css/child_combinator/index.md | 91 ++++++++++++++++++ files/ja/web/css/column_combinator/index.html | 97 ------------------- files/ja/web/css/column_combinator/index.md | 97 +++++++++++++++++++ files/ja/web/css/descendant_combinator/index.html | 107 --------------------- files/ja/web/css/descendant_combinator/index.md | 107 +++++++++++++++++++++ .../web/css/general_sibling_combinator/index.html | 84 ---------------- .../ja/web/css/general_sibling_combinator/index.md | 84 ++++++++++++++++ files/ja/web/css/selector_list/index.html | 99 ------------------- files/ja/web/css/selector_list/index.md | 99 +++++++++++++++++++ 12 files changed, 561 insertions(+), 561 deletions(-) delete mode 100644 files/ja/web/css/adjacent_sibling_combinator/index.html create mode 100644 files/ja/web/css/adjacent_sibling_combinator/index.md delete mode 100644 files/ja/web/css/child_combinator/index.html create mode 100644 files/ja/web/css/child_combinator/index.md delete mode 100644 files/ja/web/css/column_combinator/index.html create mode 100644 files/ja/web/css/column_combinator/index.md delete mode 100644 files/ja/web/css/descendant_combinator/index.html create mode 100644 files/ja/web/css/descendant_combinator/index.md delete mode 100644 files/ja/web/css/general_sibling_combinator/index.html create mode 100644 files/ja/web/css/general_sibling_combinator/index.md delete mode 100644 files/ja/web/css/selector_list/index.html create mode 100644 files/ja/web/css/selector_list/index.md diff --git a/files/ja/web/css/adjacent_sibling_combinator/index.html b/files/ja/web/css/adjacent_sibling_combinator/index.html deleted file mode 100644 index 003333d6df..0000000000 --- a/files/ja/web/css/adjacent_sibling_combinator/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 隣接兄弟結合子 -slug: Web/CSS/Adjacent_sibling_combinator -tags: - - CSS - - Reference - - Selectors - - セレクター -translation_of: Web/CSS/Adjacent_sibling_combinator ---- -
{{CSSRef("Selectors")}}
- -

隣接兄弟結合子 (adjacent sibling combinator) (+) は2つのセレクターを接続し、同じ親{{DOMxRef("element", "要素")}}の子同士であって、1つ目の要素の直後にある2つ目の要素を選択します。

- -
/* 画像の直後に来る段落 */
-img + p {
-  font-style: bold;
-}
- -

構文

- -
直前の要素 + 対象の要素 { スタイルプロパティ }
-
- -

例

- -

CSS

- -
li:first-of-type + li {
-  color: red;
-}
-
- -

HTML

- -
<ul>
-  <li>One</li>
-  <li>Two!</li>
-  <li>Three</li>
-</ul>
- -

Result

- -

{{EmbedLiveSample("Example", "100%", 100)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors", "#adjacent-sibling-combinators", "next-sibling combinator")}}{{Spec2("CSS4 Selectors")}}名前を「次の兄弟」結合子に変更。
{{SpecName("CSS3 Selectors", "#adjacent-sibling-combinators", "Adjacent sibling combinator")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#adjacent-selectors", "Adjacent sibling selectors")}}{{Spec2("CSS2.1")}}初回定義
- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/adjacent_sibling_combinator/index.md b/files/ja/web/css/adjacent_sibling_combinator/index.md new file mode 100644 index 0000000000..003333d6df --- /dev/null +++ b/files/ja/web/css/adjacent_sibling_combinator/index.md @@ -0,0 +1,83 @@ +--- +title: 隣接兄弟結合子 +slug: Web/CSS/Adjacent_sibling_combinator +tags: + - CSS + - Reference + - Selectors + - セレクター +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

隣接兄弟結合子 (adjacent sibling combinator) (+) は2つのセレクターを接続し、同じ親{{DOMxRef("element", "要素")}}の子同士であって、1つ目の要素の直後にある2つ目の要素を選択します。

+ +
/* 画像の直後に来る段落 */
+img + p {
+  font-style: bold;
+}
+ +

構文

+ +
直前の要素 + 対象の要素 { スタイルプロパティ }
+
+ +

例

+ +

CSS

+ +
li:first-of-type + li {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li>One</li>
+  <li>Two!</li>
+  <li>Three</li>
+</ul>
+ +

Result

+ +

{{EmbedLiveSample("Example", "100%", 100)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#adjacent-sibling-combinators", "next-sibling combinator")}}{{Spec2("CSS4 Selectors")}}名前を「次の兄弟」結合子に変更。
{{SpecName("CSS3 Selectors", "#adjacent-sibling-combinators", "Adjacent sibling combinator")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#adjacent-selectors", "Adjacent sibling selectors")}}{{Spec2("CSS2.1")}}初回定義
+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/child_combinator/index.html b/files/ja/web/css/child_combinator/index.html deleted file mode 100644 index 49c1bde803..0000000000 --- a/files/ja/web/css/child_combinator/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: 子結合子 -slug: Web/CSS/Child_combinator -tags: - - CSS - - Reference - - Selector - - Selectors -translation_of: Web/CSS/Child_combinator ---- -
{{CSSRef("Selectors")}}
- -

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

- -
/* "my-things"クラスを持つリストの子要素であるリスト項目 */
-ul.my-things > li {
-  margin: 2em;
-}
- -

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

- -

構文

- -
セレクター1 > セレクター2 { スタイルプロパティ }
-
- -

例

- -

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("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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/child_combinator/index.md b/files/ja/web/css/child_combinator/index.md new file mode 100644 index 0000000000..49c1bde803 --- /dev/null +++ b/files/ja/web/css/child_combinator/index.md @@ -0,0 +1,91 @@ +--- +title: 子結合子 +slug: Web/CSS/Child_combinator +tags: + - CSS + - Reference + - Selector + - Selectors +translation_of: Web/CSS/Child_combinator +--- +
{{CSSRef("Selectors")}}
+ +

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

+ +
/* "my-things"クラスを持つリストの子要素であるリスト項目 */
+ul.my-things > li {
+  margin: 2em;
+}
+ +

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

+ +

構文

+ +
セレクター1 > セレクター2 { スタイルプロパティ }
+
+ +

例

+ +

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("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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/column_combinator/index.html b/files/ja/web/css/column_combinator/index.html deleted file mode 100644 index ef53cb0729..0000000000 --- a/files/ja/web/css/column_combinator/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: 列結合子 -slug: Web/CSS/Column_combinator -tags: - - CSS - - Experimental - - Reference - - Selectors - - セレクター - - 表 -translation_of: Web/CSS/Column_combinator ---- -
{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}
- -

列結合子 (column combinator) (||) は、二つの CSS セレクターの間に配置されます。前者のセレクターに一致する列要素に所属する、後者のセレクターに一致する要素に一致します。

- -
/* 表の "selected" クラスの列に所属するセル */
-col.selected || td {
-  background: gray;
-}
-
- -

構文

- -
column-selector || cell-selector {
-  /* スタイルプロパティ */
-}
-
- -

Examples

- -

HTML

- -
<table border="1">
-  <colgroup>
-    <col span="2"/>
-    <col class="selected"/>
-  </colgroup>
-  <tbody>
-    <tr>
-      <td>A
-      <td>B
-      <td>C
-    </tr>
-    <tr>
-      <td colspan="2">D</td>
-      <td>E</td>
-    </tr>
-    <tr>
-      <td>F</td>
-      <td colspan="2">G</td>
-    </tr>
-  </tbody>
-</table>
- -

CSS

- -
col.selected || td {
-  background: gray;
-  color: white;
-  font-weight: bold;
-}
- -

結果

- -

{{EmbedLiveSample("Examples", "100%")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}}{{Spec2("CSS4 Selectors")}}初回定義
- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/column_combinator/index.md b/files/ja/web/css/column_combinator/index.md new file mode 100644 index 0000000000..ef53cb0729 --- /dev/null +++ b/files/ja/web/css/column_combinator/index.md @@ -0,0 +1,97 @@ +--- +title: 列結合子 +slug: Web/CSS/Column_combinator +tags: + - CSS + - Experimental + - Reference + - Selectors + - セレクター + - 表 +translation_of: Web/CSS/Column_combinator +--- +
{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}
+ +

列結合子 (column combinator) (||) は、二つの CSS セレクターの間に配置されます。前者のセレクターに一致する列要素に所属する、後者のセレクターに一致する要素に一致します。

+ +
/* 表の "selected" クラスの列に所属するセル */
+col.selected || td {
+  background: gray;
+}
+
+ +

構文

+ +
column-selector || cell-selector {
+  /* スタイルプロパティ */
+}
+
+ +

Examples

+ +

HTML

+ +
<table border="1">
+  <colgroup>
+    <col span="2"/>
+    <col class="selected"/>
+  </colgroup>
+  <tbody>
+    <tr>
+      <td>A
+      <td>B
+      <td>C
+    </tr>
+    <tr>
+      <td colspan="2">D</td>
+      <td>E</td>
+    </tr>
+    <tr>
+      <td>F</td>
+      <td colspan="2">G</td>
+    </tr>
+  </tbody>
+</table>
+ +

CSS

+ +
col.selected || td {
+  background: gray;
+  color: white;
+  font-weight: bold;
+}
+ +

結果

+ +

{{EmbedLiveSample("Examples", "100%")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}}{{Spec2("CSS4 Selectors")}}初回定義
+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/descendant_combinator/index.html b/files/ja/web/css/descendant_combinator/index.html deleted file mode 100644 index ccd943c451..0000000000 --- a/files/ja/web/css/descendant_combinator/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: 子孫結合子 -slug: Web/CSS/Descendant_combinator -tags: - - CSS - - Reference - - Selector - - Selectors -translation_of: Web/CSS/Descendant_combinator ---- -
{{CSSRef("Selectors")}}
- -

子孫結合子 (descendant combinator) — 通常は単一の空白文字 ( ) で表される — は2つの CSS セレクターを結合し、1つ目のセレクターに一致する要素が祖先 (親、親の親、親の親の親、など) となっている2つ目のセレクターに一致します。子孫結合子を利用したセレクターは子孫セレクターと呼ばれます。

- -
/* "my-things" リストの子孫のリスト項目 */
-ul.my-things li {
-  margin: 2em;
-}
- -

子孫結合子は、技術的には他の結合子がない2つのセレクターの間にある1つ以上の {{Glossary("CSS")}} {{Glossary("Whitespace", "ホワイトスペース")}}文字 ― 空白文字や4種類の制御文字 (復帰、ページ送り、改行、タブ文字) のうちの1つ ― です。さらに、結合子としてのホワイトスペース文字には任意の数の CSS コメントを含めることができます。

- -

構文

- -
セレクター1 セレクター2 {
-  /* プロパティ宣言 */
-}
- -

例

- -

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

結果

- -

{{EmbedLiveSample("Examples", "100%", 160)}}

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/descendant_combinator/index.md b/files/ja/web/css/descendant_combinator/index.md new file mode 100644 index 0000000000..ccd943c451 --- /dev/null +++ b/files/ja/web/css/descendant_combinator/index.md @@ -0,0 +1,107 @@ +--- +title: 子孫結合子 +slug: Web/CSS/Descendant_combinator +tags: + - CSS + - Reference + - Selector + - Selectors +translation_of: Web/CSS/Descendant_combinator +--- +
{{CSSRef("Selectors")}}
+ +

子孫結合子 (descendant combinator) — 通常は単一の空白文字 ( ) で表される — は2つの CSS セレクターを結合し、1つ目のセレクターに一致する要素が祖先 (親、親の親、親の親の親、など) となっている2つ目のセレクターに一致します。子孫結合子を利用したセレクターは子孫セレクターと呼ばれます。

+ +
/* "my-things" リストの子孫のリスト項目 */
+ul.my-things li {
+  margin: 2em;
+}
+ +

子孫結合子は、技術的には他の結合子がない2つのセレクターの間にある1つ以上の {{Glossary("CSS")}} {{Glossary("Whitespace", "ホワイトスペース")}}文字 ― 空白文字や4種類の制御文字 (復帰、ページ送り、改行、タブ文字) のうちの1つ ― です。さらに、結合子としてのホワイトスペース文字には任意の数の CSS コメントを含めることができます。

+ +

構文

+ +
セレクター1 セレクター2 {
+  /* プロパティ宣言 */
+}
+ +

例

+ +

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>
+
+ +

結果

+ +

{{EmbedLiveSample("Examples", "100%", 160)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}{{Spec2("CSS4 Selectors")}}
{{SpecName("CSS3 Selectors", "#descendant-combinators", "descendant combinator")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#descendant-selectors", "descendant selectors")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1", "#contextual-selectors", "contextual selectors")}}{{Spec2("CSS1")}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/general_sibling_combinator/index.html b/files/ja/web/css/general_sibling_combinator/index.html deleted file mode 100644 index 22b97dc75c..0000000000 --- a/files/ja/web/css/general_sibling_combinator/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: 一般兄弟結合子 -slug: Web/CSS/General_sibling_combinator -tags: - - CSS - - Reference - - Selectors - - セレクター -translation_of: Web/CSS/General_sibling_combinator ---- -
{{CSSRef("Selectors")}}
- -

一般兄弟結合子 (general sibling combinator, ~) は2個のセレクターを結びつけます。右側のセレクタで選択される要素のうち、次の条件をともにみたすものを選択します。

- -

まず、右側のセレクタで選択される要素が、左側のセレクタで選択される要素より後に現れることです。（直後である必要はありません）

- -

もうひとつは、これらの要素が同じ親要素（{{Glossary("element", "要素")}}）をもつことです。

- -
/* 任意の画像の兄弟で、
-   その画像より後方にある段落 */
-img ~ p {
-  color: red;
-}
- -

構文

- -
先行する要素 ~ 選択される要素 { スタイルプロパティ }
-
- -

例

- -

CSS

- -
p ~ span {
-  color: red;
-}
- -

HTML

- -
<span>This is not red.</span>
-<p>Here is a paragraph.</p>
-<code>Here is some code.</code>
-<span>And here is a red span!</span>
-<code>More code...</code>
-<span>And this is a red span!</span>
-
- -

結果

- -

{{EmbedLiveSample("Example", "100%", 120)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors", "#general-sibling-combinators", "subsequent-sibling combinator")}}{{Spec2("CSS4 Selectors")}}名前を"subsequent-sibling combinator"に変更。
{{SpecName("CSS3 Selectors", "#general-sibling-combinators", "general sibling combinator")}}{{Spec2("CSS3 Selectors")}}初回定義
- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/general_sibling_combinator/index.md b/files/ja/web/css/general_sibling_combinator/index.md new file mode 100644 index 0000000000..22b97dc75c --- /dev/null +++ b/files/ja/web/css/general_sibling_combinator/index.md @@ -0,0 +1,84 @@ +--- +title: 一般兄弟結合子 +slug: Web/CSS/General_sibling_combinator +tags: + - CSS + - Reference + - Selectors + - セレクター +translation_of: Web/CSS/General_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

一般兄弟結合子 (general sibling combinator, ~) は2個のセレクターを結びつけます。右側のセレクタで選択される要素のうち、次の条件をともにみたすものを選択します。

+ +

まず、右側のセレクタで選択される要素が、左側のセレクタで選択される要素より後に現れることです。（直後である必要はありません）

+ +

もうひとつは、これらの要素が同じ親要素（{{Glossary("element", "要素")}}）をもつことです。

+ +
/* 任意の画像の兄弟で、
+   その画像より後方にある段落 */
+img ~ p {
+  color: red;
+}
+ +

構文

+ +
先行する要素 ~ 選択される要素 { スタイルプロパティ }
+
+ +

例

+ +

CSS

+ +
p ~ span {
+  color: red;
+}
+ +

HTML

+ +
<span>This is not red.</span>
+<p>Here is a paragraph.</p>
+<code>Here is some code.</code>
+<span>And here is a red span!</span>
+<code>More code...</code>
+<span>And this is a red span!</span>
+
+ +

結果

+ +

{{EmbedLiveSample("Example", "100%", 120)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#general-sibling-combinators", "subsequent-sibling combinator")}}{{Spec2("CSS4 Selectors")}}名前を"subsequent-sibling combinator"に変更。
{{SpecName("CSS3 Selectors", "#general-sibling-combinators", "general sibling combinator")}}{{Spec2("CSS3 Selectors")}}初回定義
+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/selector_list/index.html b/files/ja/web/css/selector_list/index.html deleted file mode 100644 index edcda39a65..0000000000 --- a/files/ja/web/css/selector_list/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: セレクターリスト -slug: Web/CSS/Selector_list -tags: - - CSS - - Selector - - Selector Lists - - Selectors -translation_of: Web/CSS/Selector_list ---- -
{{CSSRef}}
- -

CSS の セレクターリスト (selector list) (,) は，すべての一致するノードを選択します。

- -
/* すべての一致する要素を選択 */
-span,
-div {
-  border: red 2px solid;
-}
- -

スタイルシートの大きさを縮小するために、グループセレクターをカンマ区切りのリストにすることができます。

- -

構文

- -
element, element, element { style properties }
- -

事例

- -

単一行のグループ化

- -

カンマ区切りのリストを使用して単一行にしたグループ化セレクターです。

- -
h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
-
- -

複数行のグループ化

- -

カンマ区切りのリストを使用して複数行にしたグループ化セレクターです。

- -
#main,
-.content,
-article {
-  font-size: 1.1em;
-}
-
- -

セレクターリストの無効化

- -

セレクターリストを使用する欠点は、以下のものが等価ではないことです。

- -
h1 { font-family: sans-serif }
-h2:maybe-unsupported { font-family: sans-serif }
-h3 { font-family: sans-serif }
- -
h1, h2:maybe-unsupported, h3 { font-family: sans-serif }
- -

これは、セレクターリスト内に未対応のセレクターが一つでもあった場合は、規則全体が無効化されてしまうためです。

- -

この対策方法としては、 {{CSSxRef(":is", ":is()")}} セレクターを使用すれば、単純に引数内の無効なセレクターを無視しますが、 {{CSSxRef(":is", ":is()")}} の詳細度の計算方法の影響で、すべてのセレクターの重みが同じ詳細度になります。

- -
h1 { font-family: sans-serif }
-h2:maybe-unsupported { font-family: sans-serif }
-h3 { font-family: sans-serif }
- -
:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors", "#grouping", "Selector Lists")}}{{Spec2("CSS4 Selectors")}}「セレクターリスト」に改名
{{SpecName('CSS1', '#grouping', 'grouping')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/selector_list/index.md b/files/ja/web/css/selector_list/index.md new file mode 100644 index 0000000000..edcda39a65 --- /dev/null +++ b/files/ja/web/css/selector_list/index.md @@ -0,0 +1,99 @@ +--- +title: セレクターリスト +slug: Web/CSS/Selector_list +tags: + - CSS + - Selector + - Selector Lists + - Selectors +translation_of: Web/CSS/Selector_list +--- +
{{CSSRef}}
+ +

CSS の セレクターリスト (selector list) (,) は，すべての一致するノードを選択します。

+ +
/* すべての一致する要素を選択 */
+span,
+div {
+  border: red 2px solid;
+}
+ +

スタイルシートの大きさを縮小するために、グループセレクターをカンマ区切りのリストにすることができます。

+ +

構文

+ +
element, element, element { style properties }
+ +

事例

+ +

単一行のグループ化

+ +

カンマ区切りのリストを使用して単一行にしたグループ化セレクターです。

+ +
h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
+
+ +

複数行のグループ化

+ +

カンマ区切りのリストを使用して複数行にしたグループ化セレクターです。

+ +
#main,
+.content,
+article {
+  font-size: 1.1em;
+}
+
+ +

セレクターリストの無効化

+ +

セレクターリストを使用する欠点は、以下のものが等価ではないことです。

+ +
h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }
+ +
h1, h2:maybe-unsupported, h3 { font-family: sans-serif }
+ +

これは、セレクターリスト内に未対応のセレクターが一つでもあった場合は、規則全体が無効化されてしまうためです。

+ +

この対策方法としては、 {{CSSxRef(":is", ":is()")}} セレクターを使用すれば、単純に引数内の無効なセレクターを無視しますが、 {{CSSxRef(":is", ":is()")}} の詳細度の計算方法の影響で、すべてのセレクターの重みが同じ詳細度になります。

+ +
h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }
+ +
:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#grouping", "Selector Lists")}}{{Spec2("CSS4 Selectors")}}「セレクターリスト」に改名
{{SpecName('CSS1', '#grouping', 'grouping')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

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