From 4cefa8e22f63e40f379827e7db52b63601d3b8bd Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 6 Jan 2022 09:29:39 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/selector_list/index.md | 120 +++++++++++++++----------------- 1 file changed, 56 insertions(+), 64 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/selector_list/index.md b/files/ja/web/css/selector_list/index.md index edcda39a65..c86c70c721 100644 --- a/files/ja/web/css/selector_list/index.md +++ b/files/ja/web/css/selector_list/index.md @@ -3,97 +3,89 @@ title: セレクターリスト slug: Web/CSS/Selector_list tags: - CSS - - Selector - - Selector Lists - - Selectors + - セレクター + - セレクターリスト +browser-compat: css.selectors.list translation_of: Web/CSS/Selector_list --- -
{{CSSRef}}
+{{CSSRef}} -

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

+CSS の **セレクターリスト** (selector list) (`,`) は，すべての一致するノードを選択します。 -
/* すべての一致する要素を選択 */
+```css
+/* すべての一致する要素を選択 */
 span,
 div {
   border: red 2px solid;
-}
+} +``` -

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

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

構文

+## 構文 -
element, element, element { style properties }
+```css +element, element, element { スタイルプロパティ } +``` -

事例

+## 例 -

単一行のグループ化

+### 単一行のグループ化 -

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

+カンマ区切りのリストを使用して単一行にしたグループ化セレクターです。 -
h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
-
+```css +h1, h2, h3, h4, h5, h6 { font-family: helvetica; } +``` -

複数行のグループ化

+### 複数行のグループ化 -

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

+カンマ区切りのリストを使用して複数行にしたグループ化セレクターです。 -
#main,
+```css
+#main,
 .content,
 article {
   font-size: 1.1em;
 }
-
+``` -

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

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

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

+セレクターリストを使用する欠点は、以下のものが等価ではないことです。 -
h1 { font-family: sans-serif }
+```css
+h1 { font-family: sans-serif }
 h2:maybe-unsupported { font-family: sans-serif }
-h3 { font-family: sans-serif }
+h3 { font-family: sans-serif } +``` -
h1, h2:maybe-unsupported, h3 { font-family: sans-serif }
+```css +h1, h2:maybe-unsupported, h3 { font-family: sans-serif } +``` -

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

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

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

+この対策方法としては、 {{CSSxRef(":is", ":is()")}} や {{CSSxRef(":where", ":where()")}} セレクターを使用すれば、セレクターリストを寛容に受け止めることができます。こうすると、リスト内の無効なセレクターは無視しますが、有効なセレクターは受け入れます。 -
h1 { font-family: sans-serif }
+```css
+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")}}

- -

関連情報

- - +h3 { font-family: sans-serif } +``` + +```css +:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif } +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- The {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} および {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} 擬似クラスは、セレクターリストを寛容に受け入れます。 -- cgit v1.2.3-54-g00ecf