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 --- files/ja/web/css/selector_list/index.html | 99 ------------------------------- files/ja/web/css/selector_list/index.md | 99 +++++++++++++++++++++++++++++++ 2 files changed, 99 insertions(+), 99 deletions(-) delete mode 100644 files/ja/web/css/selector_list/index.html create mode 100644 files/ja/web/css/selector_list/index.md (limited to 'files/ja/web/css/selector_list') 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