From d2a9c594e446e7592360c3ada8469fde590649f7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 5 Jan 2022 00:15:25 +0900 Subject: その他の CSS 擬似クラスの記事を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_where/index.html | 132 ------------------------------- files/ja/web/css/_colon_where/index.md | 132 +++++++++++++++++++++++++++++++ 2 files changed, 132 insertions(+), 132 deletions(-) delete mode 100644 files/ja/web/css/_colon_where/index.html create mode 100644 files/ja/web/css/_colon_where/index.md (limited to 'files/ja/web/css/_colon_where') diff --git a/files/ja/web/css/_colon_where/index.html b/files/ja/web/css/_colon_where/index.html deleted file mode 100644 index 2517e8a168..0000000000 --- a/files/ja/web/css/_colon_where/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: ':where()' -slug: 'Web/CSS/:where' -tags: - - ':where' - - CSS - - Experimental - - NeedsBrowserCompatibility - - NeedsContent - - NeedsExample - - Pseudo-class - - Reference - - Selector - - Selectors - - Web - - セレクター - - 擬似クラス -translation_of: 'Web/CSS/:where' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

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

- -

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

- -

例

- -

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

- -

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

- -

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

- -
<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>
-
-  <footer class="is-styling">
-    <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
-  </footer>
-</article>
-
-<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>
-
-  <aside class="where-styling">
-    <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
-  </aside>
-
-  <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() を使うことができます。

- -
html {
-  font-family: sans-serif;
-  font-size: 150%;
-}
-
-:is(section.is-styling, aside.is-styling, footer.is-styling) a {
-  color: red;
-}
-
-:where(section.where-styling, aside.where-styling, footer.where-styling) a {
-  color: orange;
-}
- -

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

- -
footer a {
-  color: blue;
-}
- -

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

- -

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

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

- -

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

- -

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

- -

構文

- -{{CSSSyntax}} - -

仕様書

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

ブラウザーの互換性

- -
-

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

-
- -

関連情報

- - diff --git a/files/ja/web/css/_colon_where/index.md b/files/ja/web/css/_colon_where/index.md new file mode 100644 index 0000000000..2517e8a168 --- /dev/null +++ b/files/ja/web/css/_colon_where/index.md @@ -0,0 +1,132 @@ +--- +title: ':where()' +slug: 'Web/CSS/:where' +tags: + - ':where' + - CSS + - Experimental + - NeedsBrowserCompatibility + - NeedsContent + - NeedsExample + - Pseudo-class + - Reference + - Selector + - Selectors + - Web + - セレクター + - 擬似クラス +translation_of: 'Web/CSS/:where' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

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

+ +

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

+ +

例

+ +

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

+ +

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

+ +

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

+ +
<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>
+
+  <footer class="is-styling">
+    <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
+  </footer>
+</article>
+
+<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>
+
+  <aside class="where-styling">
+    <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
+  </aside>
+
+  <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() を使うことができます。

+ +
html {
+  font-family: sans-serif;
+  font-size: 150%;
+}
+
+:is(section.is-styling, aside.is-styling, footer.is-styling) a {
+  color: red;
+}
+
+:where(section.where-styling, aside.where-styling, footer.where-styling) a {
+  color: orange;
+}
+ +

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

+ +
footer a {
+  color: blue;
+}
+ +

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

+ +

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

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

+ +

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

+ +

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

+ +

構文

+ +{{CSSSyntax}} + +

仕様書

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

ブラウザーの互換性

+ +
+

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

+
+ +

関連情報

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