From c7a03825ce2d482d4c8d045736eab2d8a586fff4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 5 Jan 2022 00:34:09 +0900 Subject: 2021/11/16 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_where/index.md | 194 ++++++++++++++++++--------------- 1 file changed, 108 insertions(+), 86 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/_colon_where/index.md b/files/ja/web/css/_colon_where/index.md index 2517e8a168..4ee246a5c1 100644 --- a/files/ja/web/css/_colon_where/index.md +++ b/files/ja/web/css/_colon_where/index.md @@ -1,71 +1,111 @@ --- title: ':where()' -slug: 'Web/CSS/:where' +slug: Web/CSS/:where tags: - ':where' - CSS - - Experimental + - 実験的 - NeedsBrowserCompatibility - NeedsContent - NeedsExample - - Pseudo-class - - Reference - - Selector - - Selectors - - Web - - セレクター - 擬似クラス -translation_of: 'Web/CSS/:where' + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.where +translation_of: Web/CSS/:where --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}} -

:where() は CSS の擬似クラス関数で、選択肢列挙を引数として取り、列挙されたセレクターのうちの何れかに当てはまるすべての要素を選択します。

+**`:where()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)関数で、セレクターリストを引数として取り、列挙されたセレクターのうちの何れかに当てはまるすべての要素を選択します。 -

:where() と {{CSSxRef(":is", ":is()")}} の違いは、 :where() は詳細度が常に 0 であるのに対して、 :is() は引数内で最も詳細度の高いセレクターの詳細度を取ります。

+```css +/* ヘッダー、メイン、フッターの何れかの中にある段落に + カーソルをかざしたときに選択 */ +:where(header, main, footer) p:hover { + color: red; + cursor: pointer; +} + +/* 上記のものは下記のものと同等です。 */ +header p:hover, +main p:hover, +footer p:hover { + color: red; + cursor: pointer; +} +``` -

例

+`:where()` と {{CSSxRef(":is", ":is()")}} の違いは、 `:where()` は[詳細度](/ja/docs/Web/CSS/Specificity)が常に 0 であるのに対して、 `:is()` は引数内で最も詳細度の高いセレクターの詳細度を取ります。 -

:where() と :is() の比較

+### 寛容なセレクター解釈 -

この例では :where() がどのように作用するのかを示し、 :where() と :is() の違いも説明しています。

+仕様では、`:is()` と `:where()` が[寛容なセレクターリスト](https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list)を受け入れると定義されています。 + +CSS では、セレクターリストを使用する場合、いずれかのセレクターが無効であれば、リスト全体が無効であると判断されます。 `is()` や `:where()` を使用する場合、 1 つでも解釈に失敗するとセレクターリスト全体が無効とみなされるのではなく、不正確または対応していないセレクターは無視され、他のものが使用されます。 + +```css +:where(:valid, :unsupported) { + ... +} +``` + +Will still parse correctly and match `:valid` even in browsers which don't support `:unsupported`, whereas: + +```css +:valid, :unsupported { + ... +} +``` -

以下のような HTML を想定してください。

+Will be ignored in browsers which don't support `:unsupported` even if they support `:valid`. -
<article>
-  <h2>:is()-styled links</h2>
-  <section class="is-styling">
-    <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
-  </section>
+## 例
 
-  <aside class="is-styling">
-    <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
-  </aside>
+### :where() と :is() の比較
 
-  <footer class="is-styling">
-    <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
-  </footer>
-</article>
+この例では `:where()` がどのように作用するのかを示し、 `:where()` と `:is()` の違いも説明しています。
 
-<article>
-  <h2>:where()-styled links</h2>
-  <section class="where-styling">
-    <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
-  </section>
+以下のような HTML を想定してください。
 
-  <aside class="where-styling">
-    <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
-  </aside>
+```html
+

+  
:is() でスタイル付けしたリンク

+  

+    
こちらがメインコンテンツです。これはリンクを含んでいます。
+  

 
-  <footer class="where-styling">
-    <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
-  </footer>
-</article>
+ -

このやや矛盾した例では、2つの記事があり、それぞれがセクション、脇、フッターを含んでいます。これらの記事は、子要素をマークするために使われるクラスによって異なります。

+ + -

中のリンクの選択をより簡単にして、しかし区別できるようにするために、次のように :is() や :where() を使うことができます。

+
+

:where() でスタイル付けしたリンク

+
+

こちらがメインコンテンツです。これはリンクを含んでいます. +

-
html {
+  
+
+  

+    
こちらがフッターです。これもリンクを含んでいます。
+  

+
+``` + +このやや矛盾した例では、2 つの記事があり、それぞれがセクション、脇、フッターを含んでいます。これらの記事は、子要素をマークするために使われるクラスによって異なります。 + +中のリンクの選択をより簡単にして、しかし区別できるようにするために、次のように `:is()` や `:where()` を使うことができます。 + +```css +html { font-family: sans-serif; font-size: 150%; } @@ -76,57 +116,39 @@ translation_of: 'Web/CSS/:where' :where(section.where-styling, aside.where-styling, footer.where-styling) a { color: orange; -} +} +``` -

しかし、後からシンプルなセレクターを使ってフッターのリンクの色を上書きしたい場合はどうすればいいのでしょうか？

+しかし、後からシンプルなセレクターを使ってフッターのリンクの色を上書きしたい場合はどうすればいいのでしょうか？ -
footer a {
+```css
+footer a {
   color: blue;
-}
- -

これは赤いリンクに作用しません。 :is() の中のセレクターは全体のセレクターの詳細度で算出され、クラスセレクターは要素セレクターよりも高い詳細度を持っているからです。

+} +``` -

しかし、 :where() 内のセレクターは詳細度が 0 なので、オレンジ色のフッターリンクは単純セレクターによって上書きされてしまいます。 +これは赤いリンクに作用しません。 `:is()` の中のセレクターは全体のセレクターの詳細度で算出され、クラスセレクターは要素セレクターよりも高い詳細度を持っているからです。 -

結果は以下で見ることができます (ただし、現在のところ :is() と :where() は既定では Firefox Nightly のバージョン 77 以降では有効になっているだけで、他のバージョンの Firefox では layout.css.is-where-selectors.enabled の設定で隠されています)。

+しかし、 `:where()` 内のセレクターは詳細度が 0 なので、オレンジ色のフッターリンクは単純セレクターによって上書きされてしまいます。 -

注: この例は GitHub からも見ることができます。 is-where を参照してください。

+> **Note:** この例は GitHub からも見ることができます。 [is-where](https://mdn.github.io/css-examples/is-where/) を参照してください。 -

{{EmbedLiveSample('Examples', '100%', 600)}}

+{{EmbedLiveSample('Examples', '100%', 600)}} -

構文

+## 構文 {{CSSSyntax}} -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors", "#zero-matches", ":where()")}}{{Spec2("CSS4 Selectors")}}初回定義
- -

ブラウザーの互換性

- -
-

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

-
- -

関連情報

- - +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef(":is", ":is()")}} +- [セレクターリスト](/ja/docs/Web/CSS/Selector_list) +- [ウェブコンポーネント](/ja/docs/Web/Web_Components) -- cgit v1.2.3-54-g00ecf