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_defined/index.html | 125 ------------ files/ja/web/css/_colon_defined/index.md | 125 ++++++++++++ files/ja/web/css/_colon_fullscreen/index.html | 95 ---------- files/ja/web/css/_colon_fullscreen/index.md | 95 ++++++++++ files/ja/web/css/_colon_has/index.html | 59 ------ files/ja/web/css/_colon_has/index.md | 59 ++++++ files/ja/web/css/_colon_host/index.html | 101 ---------- files/ja/web/css/_colon_host/index.md | 101 ++++++++++ files/ja/web/css/_colon_is/index.html | 263 -------------------------- files/ja/web/css/_colon_is/index.md | 263 ++++++++++++++++++++++++++ files/ja/web/css/_colon_not/index.html | 131 ------------- files/ja/web/css/_colon_not/index.md | 131 +++++++++++++ files/ja/web/css/_colon_where/index.html | 132 ------------- files/ja/web/css/_colon_where/index.md | 132 +++++++++++++ 14 files changed, 906 insertions(+), 906 deletions(-) delete mode 100644 files/ja/web/css/_colon_defined/index.html create mode 100644 files/ja/web/css/_colon_defined/index.md delete mode 100644 files/ja/web/css/_colon_fullscreen/index.html create mode 100644 files/ja/web/css/_colon_fullscreen/index.md delete mode 100644 files/ja/web/css/_colon_has/index.html create mode 100644 files/ja/web/css/_colon_has/index.md delete mode 100644 files/ja/web/css/_colon_host/index.html create mode 100644 files/ja/web/css/_colon_host/index.md delete mode 100644 files/ja/web/css/_colon_is/index.html create mode 100644 files/ja/web/css/_colon_is/index.md delete mode 100644 files/ja/web/css/_colon_not/index.html create mode 100644 files/ja/web/css/_colon_not/index.md 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') diff --git a/files/ja/web/css/_colon_defined/index.html b/files/ja/web/css/_colon_defined/index.html deleted file mode 100644 index 2e146cdd24..0000000000 --- a/files/ja/web/css/_colon_defined/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: ':defined' -slug: 'Web/CSS/:defined' -tags: - - CSS - - HTML - - Layout - - Pseudo-class - - Reference - - Web - - セレクター - - 疑似クラス -translation_of: 'Web/CSS/:defined' ---- -
{{ CSSRef }}
- -

CSS の :defined 疑似クラスは、定義されているすべての要素を表します。これにはブラウザーに組み込まれたすべての標準要素と、 ({{domxref("CustomElementRegistry.define()")}} メソッドを使用して) 定義に成功したカスタム要素が含まれます。

- -
/* 定義されたすべての要素を選択 */
-:defined {
-  font-style: italic;
-}
-
-/* 特定の custom 要素のすべてのインスタンスを選択 */
-simple-custom:defined {
-  display: block;
-}
-
- -

構文

- -{{csssyntax}} - -

例

- -

この最初の例は <simple-custom> カスタム要素を定義するスクリプトを含んでいます。

- -
customElements.define('simple-custom',
-  class extends HTMLElement {
-    constructor() {
-      super();
-
-      let divElem = document.createElement('div');
-      divElem.textContent = this.getAttribute('text');
-
-      let shadowRoot = this.attachShadow({mode: 'open'})
-        .appendChild(divElem);
-  }
-})
- -

次に、 <simple-custom> 要素と標準の {{htmlelement("p")}} 要素のインスタンスがある HTML です。

- -
<simple-custom text="Custom element example text"></simple-custom>
-
-<p>Standard paragraph example text</p>
- -

それでは CSS です。ここでは、要素の種類に基づいて背景色を定義し、カスタム要素の不透明度を定義済みであるかどうかによって変更し、 :defined セレクターを使用して定義された要素テキストをすべて斜体で表示します。

- -
/* 2つの要素を背景で区別できるようにする */
-p {
-  background: yellow;
-}
-
-simple-custom {
-  display: block;
-  background: cyan;
-}
-
-/* カスタム要素と組み込み要素を両方イタリック体にする */
-:defined {
-  font-style: italic;
-}
- -

それから、カスタム要素が定義されていないときには非表示にするルールと、定義されていたらブロックレベル要素として定義して表示します。

- -
simple-custom:not(:defined) {
-  opacity: 0;
-}
-
-simple-custom:defined {
-  opacity: 0.75;
-  text-decoration: underline;
-}
- -

これは、複雑なカスタム要素があってページの読み込みを待ちたいときに便利です。定義が完了するまで要素のインスタンスを非表示にして、ページ上でスタイル適用前の醜い要素が一瞬現れるのを防ぐことができます。

- -

結果

- -

以上のコードを実行した結果は次の通りです。

- -

{{EmbedLiveSample('Examples')}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}{{ Spec2('HTML WHATWG') }} 
- -

ブラウザーの対応

- -

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/_colon_defined/index.md b/files/ja/web/css/_colon_defined/index.md new file mode 100644 index 0000000000..2c3884160d --- /dev/null +++ b/files/ja/web/css/_colon_defined/index.md @@ -0,0 +1,125 @@ +--- +title: ':defined' +slug: 'Web/CSS/:defined' +tags: + - CSS + - HTML + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 擬似クラス +translation_of: 'Web/CSS/:defined' +--- +
{{ CSSRef }}
+ +

CSS の :defined 擬似クラスは、定義されているすべての要素を表します。これにはブラウザーに組み込まれたすべての標準要素と、 ({{domxref("CustomElementRegistry.define()")}} メソッドを使用して) 定義に成功したカスタム要素が含まれます。

+ +
/* 定義されたすべての要素を選択 */
+:defined {
+  font-style: italic;
+}
+
+/* 特定の custom 要素のすべてのインスタンスを選択 */
+simple-custom:defined {
+  display: block;
+}
+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

この最初の例は <simple-custom> カスタム要素を定義するスクリプトを含んでいます。

+ +
customElements.define('simple-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})
+ +

次に、 <simple-custom> 要素と標準の {{htmlelement("p")}} 要素のインスタンスがある HTML です。

+ +
<simple-custom text="Custom element example text"></simple-custom>
+
+<p>Standard paragraph example text</p>
+ +

それでは CSS です。ここでは、要素の種類に基づいて背景色を定義し、カスタム要素の不透明度を定義済みであるかどうかによって変更し、 :defined セレクターを使用して定義された要素テキストをすべて斜体で表示します。

+ +
/* 2つの要素を背景で区別できるようにする */
+p {
+  background: yellow;
+}
+
+simple-custom {
+  display: block;
+  background: cyan;
+}
+
+/* カスタム要素と組み込み要素を両方イタリック体にする */
+:defined {
+  font-style: italic;
+}
+ +

それから、カスタム要素が定義されていないときには非表示にするルールと、定義されていたらブロックレベル要素として定義して表示します。

+ +
simple-custom:not(:defined) {
+  opacity: 0;
+}
+
+simple-custom:defined {
+  opacity: 0.75;
+  text-decoration: underline;
+}
+ +

これは、複雑なカスタム要素があってページの読み込みを待ちたいときに便利です。定義が完了するまで要素のインスタンスを非表示にして、ページ上でスタイル適用前の醜い要素が一瞬現れるのを防ぐことができます。

+ +

結果

+ +

以上のコードを実行した結果は次の通りです。

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}{{ Spec2('HTML WHATWG') }} 
+ +

ブラウザーの対応

+ +

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_fullscreen/index.html b/files/ja/web/css/_colon_fullscreen/index.html deleted file mode 100644 index 7696a906a3..0000000000 --- a/files/ja/web/css/_colon_fullscreen/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: ':fullscreen' -slug: 'Web/CSS/:fullscreen' -tags: - - CSS - - Full-screen - - Full-screen API - - Fullscreen API - - Pseudo-class - - Reference - - Selector - - fullscreen - - screen -translation_of: 'Web/CSS/:fullscreen' ---- -
{{CSSRef}}
- -

:fullscreen は CSS の 擬似クラスで、現在全画面モードにあるすべての要素に一致します。複数の要素が全画面モードにある場合は、それらすべてを選択します。

- -

構文

- -{{csssyntax}} - -

使用上のメモ

- -

:fullscreen 擬似クラスにより、要素が全画面と従来の表示の間を行き来した場合に、コンテンツの寸法、スタイル、レイアウトをスタイルシートで自動的に調整することができます。

- -

例

- -

この例では、文書が全画面モードであるかどうかによってボタンの色が変化します。これは JavaScript でスタイルの変更を適用せずに行われます。

- -

HTML

- -

ページの HTML は次のようなものです。

- -
<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>
-
-<p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically
-  change the style of a button used to toggle full-screen mode on and off,
-  entirely using CSS.</p>
-
-<button id="fs-toggle">Toggle Fullscreen</button>
- -

"fs-toggle" の ID を持った {{HTMLElement("button")}} が、文書が全画面モードであるかどうかによって淡い赤と淡い緑の間で変化します。

- -

CSS

- -

魔法は CSS で起こります。ここでは二つの規則があります。最初のものは要素が全画面状態でない場合に「Toggle Full-screen Mode」ボタンの色の背景を設定します。鍵になるのは :not(:fullscreen) を使用していることで、 :fullscreen 擬似クラスが適用されない要素を探します。

- -
#fs-toggle:not(:fullscreen) {
-  background-color: #afa;
-}
-
- -

文書が全画面モードである場合、代わりに次の CSS が適用され、背景色に淡い赤の影を設定します。

- -
#fs-toggle:fullscreen {
-  background-color: #faa;
-}
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}{{Spec2('Fullscreen')}}初回定義
- -

ブラウザーの互換性

- -
-

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

-
- -

関連情報

- - diff --git a/files/ja/web/css/_colon_fullscreen/index.md b/files/ja/web/css/_colon_fullscreen/index.md new file mode 100644 index 0000000000..7696a906a3 --- /dev/null +++ b/files/ja/web/css/_colon_fullscreen/index.md @@ -0,0 +1,95 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - CSS + - Full-screen + - Full-screen API + - Fullscreen API + - Pseudo-class + - Reference + - Selector + - fullscreen + - screen +translation_of: 'Web/CSS/:fullscreen' +--- +
{{CSSRef}}
+ +

:fullscreen は CSS の 擬似クラスで、現在全画面モードにあるすべての要素に一致します。複数の要素が全画面モードにある場合は、それらすべてを選択します。

+ +

構文

+ +{{csssyntax}} + +

使用上のメモ

+ +

:fullscreen 擬似クラスにより、要素が全画面と従来の表示の間を行き来した場合に、コンテンツの寸法、スタイル、レイアウトをスタイルシートで自動的に調整することができます。

+ +

例

+ +

この例では、文書が全画面モードであるかどうかによってボタンの色が変化します。これは JavaScript でスタイルの変更を適用せずに行われます。

+ +

HTML

+ +

ページの HTML は次のようなものです。

+ +
<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>
+
+<p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically
+  change the style of a button used to toggle full-screen mode on and off,
+  entirely using CSS.</p>
+
+<button id="fs-toggle">Toggle Fullscreen</button>
+ +

"fs-toggle" の ID を持った {{HTMLElement("button")}} が、文書が全画面モードであるかどうかによって淡い赤と淡い緑の間で変化します。

+ +

CSS

+ +

魔法は CSS で起こります。ここでは二つの規則があります。最初のものは要素が全画面状態でない場合に「Toggle Full-screen Mode」ボタンの色の背景を設定します。鍵になるのは :not(:fullscreen) を使用していることで、 :fullscreen 擬似クラスが適用されない要素を探します。

+ +
#fs-toggle:not(:fullscreen) {
+  background-color: #afa;
+}
+
+ +

文書が全画面モードである場合、代わりに次の CSS が適用され、背景色に淡い赤の影を設定します。

+ +
#fs-toggle:fullscreen {
+  background-color: #faa;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}{{Spec2('Fullscreen')}}初回定義
+ +

ブラウザーの互換性

+ +
+

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

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_has/index.html b/files/ja/web/css/_colon_has/index.html deleted file mode 100644 index d3b98981ca..0000000000 --- a/files/ja/web/css/_colon_has/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: ':has()' -slug: 'Web/CSS/:has' -tags: - - CSS - - Experimental - - Reference - - セレクター - - リファレンス - - 擬似クラス -translation_of: 'Web/CSS/:has' ---- -
{{CSSRef}}
- -

:has() は CSS の疑似クラスで、引数として渡されたセレクターに (指定された要素の {{cssxref(":scope")}} の相対で) 該当する要素が一つ以上の要素に一致することを表します。

- -

:has() 疑似クラスは、セレクターの相対的なリストを引数に取ります。 CSS Selectors Level 4 仕様書よりも前の版では、 :has はスタイルシート内で使用することができず、 {{domxref("document.querySelector()")}} のような関数でのみ利用することができるという制限がありました (性能上の問題です)。そのように実装するブラウザーはなかったので、この制限は撤廃されました。

- -
/* <img> 要素を直接中に含む <a> を選択する */
-/* なお、これはまだブラウザーが対応していません */
-var test = document.querySelector('a:has(> img)');
- -

構文

- -{{CSSSyntax}} - -

例

- -

次のセレクターは、 {{HTMLElement("img")}} を直接子に持つ {{HTMLElement("a")}} 要素のみに一致します。

- -
a:has(> img)
-
- -

次のセレクターは、直後に {{htmlelement("p")}} 要素を持つ {{HTMLElement("h1")}} 要素のみに一致します。

- -
h1:has(+ p)
- -

仕様書

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

ブラウザーの互換性

- -

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

diff --git a/files/ja/web/css/_colon_has/index.md b/files/ja/web/css/_colon_has/index.md new file mode 100644 index 0000000000..c8c0659606 --- /dev/null +++ b/files/ja/web/css/_colon_has/index.md @@ -0,0 +1,59 @@ +--- +title: ':has()' +slug: 'Web/CSS/:has' +tags: + - CSS + - Experimental + - Reference + - セレクター + - リファレンス + - 擬似クラス +translation_of: 'Web/CSS/:has' +--- +
{{CSSRef}}
+ +

:has() は CSS の擬似クラスで、引数として渡されたセレクターに (指定された要素の {{cssxref(":scope")}} の相対で) 該当する要素が一つ以上の要素に一致することを表します。

+ +

:has() 擬似クラスは、セレクターの相対的なリストを引数に取ります。 CSS Selectors Level 4 仕様書よりも前の版では、 :has はスタイルシート内で使用することができず、 {{domxref("document.querySelector()")}} のような関数でのみ利用することができるという制限がありました (性能上の問題です)。そのように実装するブラウザーはなかったので、この制限は撤廃されました。

+ +
/* <img> 要素を直接中に含む <a> を選択する */
+/* なお、これはまだブラウザーが対応していません */
+var test = document.querySelector('a:has(> img)');
+ +

構文

+ +{{CSSSyntax}} + +

例

+ +

次のセレクターは、 {{HTMLElement("img")}} を直接子に持つ {{HTMLElement("a")}} 要素のみに一致します。

+ +
a:has(> img)
+
+ +

次のセレクターは、直後に {{htmlelement("p")}} 要素を持つ {{HTMLElement("h1")}} 要素のみに一致します。

+ +
h1:has(+ p)
+ +

仕様書

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

ブラウザーの互換性

+ +

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

diff --git a/files/ja/web/css/_colon_host/index.html b/files/ja/web/css/_colon_host/index.html deleted file mode 100644 index 661dccdaea..0000000000 --- a/files/ja/web/css/_colon_host/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: ':host' -slug: 'Web/CSS/:host' -tags: - - ':host' - - CSS - - DOM - - Layout - - Pseudo-class - - Reference - - Selector - - Web - - Web Components - - shadow - - shadow dom - - ウェブコンポーネント - - シャドウ DOM - - セレクター - - 擬似クラス -translation_of: 'Web/CSS/:host' ---- -
{{ CSSRef }}
- -

:host は CSS の 擬似クラスで、その CSS を含むシャドウ DOM のシャドウホストを選択します。 — 言い換えれば、シャドウ DOM の中からカスタム要素を選択できるようにします。

- -
-

注: これはシャドウ DOM の外で使われたときには効果がありません。

-
- -
/* シャドウのルートホストを選択 */
-:host {
-  font-weight: bold;
-}
-
- -

構文

- -
:host
-
- -

例

- -

シャドウホストのスタイル付け

- -

以下のスニペットは、 host セレクターの例 (ライブでも参照してください) から取りました。

- -

この例では、テキストの周りを囲むことができる簡単なカスタム要素 — <context-span> — を使います。

- -
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
- -

要素のコンストラクターの中で、 style および span 要素を作成し、 span の中をカスタム要素の中身で埋め、 style 要素をいくつかの CSS 規則で埋めます。

- -
let style = document.createElement('style');
-let span = document.createElement('span');
-span.textContent = this.textContent;
-
-const shadowRoot = this.attachShadow({mode: 'open'});
-shadowRoot.appendChild(style);
-shadowRoot.appendChild(span);
-
-style.textContent = 'span:hover { text-decoration: underline; }' +
-                    ':host-context(h1) { font-style: italic; }' +
-                    ':host-context(h1):after { content: " - no links in headers!" }' +
-                    ':host-context(article, aside) { color: gray; }' +
-                    ':host(.footer) { color : red; }' +
-                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
- -

:host { background: rgba(0,0,0,0.1); padding: 2px 5px; } の規則は、文書中の <context-span> 要素 (このインスタンスのシャドウホスト) のすべてのインスタンスにスタイル付けします。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS Scope', '#host-selector', ':host') }}{{ Spec2('CSS Scope') }}初回定義。
- -

ブラウザーの互換性

- -
-

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

-
- -

関連情報

- - diff --git a/files/ja/web/css/_colon_host/index.md b/files/ja/web/css/_colon_host/index.md new file mode 100644 index 0000000000..661dccdaea --- /dev/null +++ b/files/ja/web/css/_colon_host/index.md @@ -0,0 +1,101 @@ +--- +title: ':host' +slug: 'Web/CSS/:host' +tags: + - ':host' + - CSS + - DOM + - Layout + - Pseudo-class + - Reference + - Selector + - Web + - Web Components + - shadow + - shadow dom + - ウェブコンポーネント + - シャドウ DOM + - セレクター + - 擬似クラス +translation_of: 'Web/CSS/:host' +--- +
{{ CSSRef }}
+ +

:host は CSS の 擬似クラスで、その CSS を含むシャドウ DOM のシャドウホストを選択します。 — 言い換えれば、シャドウ DOM の中からカスタム要素を選択できるようにします。

+ +
+

注: これはシャドウ DOM の外で使われたときには効果がありません。

+
+ +
/* シャドウのルートホストを選択 */
+:host {
+  font-weight: bold;
+}
+
+ +

構文

+ +
:host
+
+ +

例

+ +

シャドウホストのスタイル付け

+ +

以下のスニペットは、 host セレクターの例 (ライブでも参照してください) から取りました。

+ +

この例では、テキストの周りを囲むことができる簡単なカスタム要素 — <context-span> — を使います。

+ +
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+ +

要素のコンストラクターの中で、 style および span 要素を作成し、 span の中をカスタム要素の中身で埋め、 style 要素をいくつかの CSS 規則で埋めます。

+ +
let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+ +

:host { background: rgba(0,0,0,0.1); padding: 2px 5px; } の規則は、文書中の <context-span> 要素 (このインスタンスのシャドウホスト) のすべてのインスタンスにスタイル付けします。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS Scope', '#host-selector', ':host') }}{{ Spec2('CSS Scope') }}初回定義。
+ +

ブラウザーの互換性

+ +
+

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

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_is/index.html b/files/ja/web/css/_colon_is/index.html deleted file mode 100644 index 88c22d086d..0000000000 --- a/files/ja/web/css/_colon_is/index.html +++ /dev/null @@ -1,263 +0,0 @@ ---- -title: ':is() (:matches(), :any())' -slug: 'Web/CSS/:is' -tags: - - ':is' - - CSS - - Experimental - - Pseudo-class - - Reference - - Selector - - Selectors - - Web -translation_of: 'Web/CSS/:is' ---- -

{{CSSRef}}

- -
-

注: :matches() は :is() に改名されました。 (CSSWG issue #3258)

-
- -

CSS の :is() 擬似クラス関数は、セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。数多くのセレクターを小さくまとめて書くのに便利です。

- -
/* header, main, footer 要素の中の段落で
-   マウスポインタが通過中のものをすべて選択 */
-:is(header, main, footer) p:hover {
-  color: red;
-  cursor: pointer;
-}
-
-/* 上記のものは以下のものと同じ */
-header p:hover,
-main p:hover,
-footer p:hover {
-  color: red;
-  cursor: pointer;
-}
-
- -

なお、現在のところ、ブラウザーはこの機能を :matches() や、古いバージョンの Chrome, Firefox, Safari では、さらに古い接頭辞付きの擬似クラス — :any() で対応しています。 :any() は :matches()/:is() とまったく同じものとして動作しますが、ベンダー接頭辞が必要であり、複合セレクターに対応していません。

- -

後方互換性のために古い擬似クラスを使用することができます。

- -
/* -*-any() および :matches() と後方互換性のあるバージョン
-   (無効なセレクターがあるとルール全体が無効になるため、
-   セレクターを単一のルールにグループ化することはできません。) */
-:-webkit-any(header, main, footer) p:hover {
-  color: red;
-  cursor: pointer;
-}
-:-moz-any(header, main, footer) p:hover {
-  color: red;
-  cursor: pointer;
-}
-:matches(header, main, footer) p:hover {
-  color: red;
-  cursor: pointer;
-}
-
- -

セレクターの解釈の許容

- -

仕様では :is() と :where() が省略可能なセレクターリストを受け入れることを定義しています。

- -

CSS でセレクターリストを使用している場合、セレクターのどれかが無効な場合、リスト全体が無効とみなされます。 :is() や :where() を使用している場合、1 つでも解釈に失敗するとセレクターのリスト全体が無効とみなされるのではなく、不正なセレクターや対応していないセレクターは無視され、他のセレクターが使用されます。 - -

:is(:valid, :unsupported) {
-  ...
-}
- -

:unsupported をに対応していないブラウザーでも、正しく解釈して :valid にマッチします。

- -
:valid, :unsupported {
-  ...
-}
- -

:unupported に対応していないブラウザーでは、 :valid に対応していても無視されます。

- -

例

- -

クロスブラウザーの例

- -
<header>
-  <p>This is my header paragraph</p>
-</header>
-
-<main>
-  <ul>
-    <li><p>This is my first</p><p>list item</p></li>
-    <li><p>This is my second</p><p>list item</p></li>
-  </ul>
-</main>
-
-<footer>
-  <p>This is my footer paragraph</p>
-</footer>
- -
:-webkit-any(header, main, footer) p:hover {
-  color: red;
-  cursor: pointer;
-}
-
-:-moz-any(header, main, footer) p:hover {
-  color: red;
-  cursor: pointer;
-}
-
-:matches(header, main, footer) p:hover {
-  color: red;
-  cursor: pointer;
-}
-
-:is(header, main, footer) p:hover {
-  color: red;
-  cursor: pointer;
-}
-
- -
let matchedItems;
-
-try {
-  matchedItems = document.querySelectorAll(':is(header, main, footer) p');
-} catch(e) {
-  try {
-    matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
-  } catch(e) {
-    try {
-      matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
-    } catch(e) {
-      try {
-        matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
-      } catch(e) {
-        console.log('Your browser doesn\'t support :is(), :matches(), or :any()');
-      }
-    }
-  }
-}
-
-matchedItems.forEach(applyHandler);
-
-function applyHandler(elem) {
-  elem.addEventListener('click', function(e) {
-    alert('This paragraph is inside a ' + e.target.parentNode.nodeName);
-  });
-}
- -

{{EmbedLiveSample("Cross-browser_example", "100%", 300)}}

- -

リストセレクターの簡略化

- -

:is() 擬似クラスは CSS セレクターをとても簡潔にすることができます。例えば以下の CSS の場合、

- -
/* 3層（以上）の順序なしリストに四角形を使用 */
-ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
-ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
-ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
-ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
-ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
-ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
-menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
-menu ol menu, menu ul menu, menu menu menu, menu dir menu,
-menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
-dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
-dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
-dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
-  list-style-type: square;
-}
-
- -

... これを次のように置き換えることができます。

- -
/* 3層（以上）の順序なしリストに四角形を使用 */
-:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
-:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
-:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
-  list-style-type: square;
-}
- -

section セレクターの簡略化

- -

:is() 擬似クラスは、 HTML5 のセクションと見出しを扱うときに特に便利です。 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} は互いによく入れ子になりますので、 :is() がないと、1つ1つを選択してスタイルを適用するのが難しくなります。

- -

例えば、 :is() を使わずに、異なる深さの {{HTMLElement("h1")}} 要素にスタイルを適用すると、とても複雑になります。

- -
/* Level 0 */
-h1 {
-  font-size: 30px;
-}
-/* Level 1 */
-section h1, article h1, aside h1, nav h1 {
-  font-size: 25px;
-}
-/* Level 2 */
-section section h1, section article h1, section aside h1, section nav h1,
-article section h1, article article h1, article aside h1, article nav h1,
-aside section h1, aside article h1, aside aside h1, aside nav h1,
-nav section h1, nav article h1, nav aside h1, nav nav h1 {
-  font-size: 20px;
-}
-/* Level 3 */
-/* ... 考えたくありません! */
-
- -

:is() を使用すると、ずっと簡単になります。

- -
/* Level 0 */
-h1 {
-  font-size: 30px;
-}
-/* Level 1 */
-:is(section, article, aside, nav) h1 {
-  font-size: 25px;
-}
-/* Level 2 */
-:is(section, article, aside, nav)
-:is(section, article, aside, nav) h1 {
-  font-size: 20px;
-}
-/* Level 3 */
-:is(section, article, aside, nav)
-:is(section, article, aside, nav)
-:is(section, article, aside, nav) h1 {
-  font-size: 15px;
-}
-
- -

:is() と :where() の違い

- -

この2つの違いは、 :is() がセレクター全体の詳細度にカウントされるのに対し、 {{CSSxRef(":where", ":where()")}} は詳細度の値が 0 であることです。これは、 :where() のリファレンスページにある例で示されています。

- -

構文

- -{{CSSSyntax}} - -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/_colon_is/index.md b/files/ja/web/css/_colon_is/index.md new file mode 100644 index 0000000000..88c22d086d --- /dev/null +++ b/files/ja/web/css/_colon_is/index.md @@ -0,0 +1,263 @@ +--- +title: ':is() (:matches(), :any())' +slug: 'Web/CSS/:is' +tags: + - ':is' + - CSS + - Experimental + - Pseudo-class + - Reference + - Selector + - Selectors + - Web +translation_of: 'Web/CSS/:is' +--- +

{{CSSRef}}

+ +
+

注: :matches() は :is() に改名されました。 (CSSWG issue #3258)

+
+ +

CSS の :is() 擬似クラス関数は、セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。数多くのセレクターを小さくまとめて書くのに便利です。

+ +
/* header, main, footer 要素の中の段落で
+   マウスポインタが通過中のものをすべて選択 */
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* 上記のものは以下のものと同じ */
+header p:hover,
+main p:hover,
+footer p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+ +

なお、現在のところ、ブラウザーはこの機能を :matches() や、古いバージョンの Chrome, Firefox, Safari では、さらに古い接頭辞付きの擬似クラス — :any() で対応しています。 :any() は :matches()/:is() とまったく同じものとして動作しますが、ベンダー接頭辞が必要であり、複合セレクターに対応していません。

+ +

後方互換性のために古い擬似クラスを使用することができます。

+ +
/* -*-any() および :matches() と後方互換性のあるバージョン
+   (無効なセレクターがあるとルール全体が無効になるため、
+   セレクターを単一のルールにグループ化することはできません。) */
+:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+ +

セレクターの解釈の許容

+ +

仕様では :is() と :where() が省略可能なセレクターリストを受け入れることを定義しています。

+ +

CSS でセレクターリストを使用している場合、セレクターのどれかが無効な場合、リスト全体が無効とみなされます。 :is() や :where() を使用している場合、1 つでも解釈に失敗するとセレクターのリスト全体が無効とみなされるのではなく、不正なセレクターや対応していないセレクターは無視され、他のセレクターが使用されます。 + +

:is(:valid, :unsupported) {
+  ...
+}
+ +

:unsupported をに対応していないブラウザーでも、正しく解釈して :valid にマッチします。

+ +
:valid, :unsupported {
+  ...
+}
+ +

:unupported に対応していないブラウザーでは、 :valid に対応していても無視されます。

+ +

例

+ +

クロスブラウザーの例

+ +
<header>
+  <p>This is my header paragraph</p>
+</header>
+
+<main>
+  <ul>
+    <li><p>This is my first</p><p>list item</p></li>
+    <li><p>This is my second</p><p>list item</p></li>
+  </ul>
+</main>
+
+<footer>
+  <p>This is my footer paragraph</p>
+</footer>
+ +
:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+ +
let matchedItems;
+
+try {
+  matchedItems = document.querySelectorAll(':is(header, main, footer) p');
+} catch(e) {
+  try {
+    matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
+  } catch(e) {
+    try {
+      matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
+    } catch(e) {
+      try {
+        matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
+      } catch(e) {
+        console.log('Your browser doesn\'t support :is(), :matches(), or :any()');
+      }
+    }
+  }
+}
+
+matchedItems.forEach(applyHandler);
+
+function applyHandler(elem) {
+  elem.addEventListener('click', function(e) {
+    alert('This paragraph is inside a ' + e.target.parentNode.nodeName);
+  });
+}
+ +

{{EmbedLiveSample("Cross-browser_example", "100%", 300)}}

+ +

リストセレクターの簡略化

+ +

:is() 擬似クラスは CSS セレクターをとても簡潔にすることができます。例えば以下の CSS の場合、

+ +
/* 3層（以上）の順序なしリストに四角形を使用 */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+
+ +

... これを次のように置き換えることができます。

+ +
/* 3層（以上）の順序なしリストに四角形を使用 */
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}
+ +

section セレクターの簡略化

+ +

:is() 擬似クラスは、 HTML5 のセクションと見出しを扱うときに特に便利です。 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} は互いによく入れ子になりますので、 :is() がないと、1つ1つを選択してスタイルを適用するのが難しくなります。

+ +

例えば、 :is() を使わずに、異なる深さの {{HTMLElement("h1")}} 要素にスタイルを適用すると、とても複雑になります。

+ +
/* Level 0 */
+h1 {
+  font-size: 30px;
+}
+/* Level 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Level 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1 {
+  font-size: 20px;
+}
+/* Level 3 */
+/* ... 考えたくありません! */
+
+ +

:is() を使用すると、ずっと簡単になります。

+ +
/* Level 0 */
+h1 {
+  font-size: 30px;
+}
+/* Level 1 */
+:is(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Level 2 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Level 3 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+
+ +

:is() と :where() の違い

+ +

この2つの違いは、 :is() がセレクター全体の詳細度にカウントされるのに対し、 {{CSSxRef(":where", ":where()")}} は詳細度の値が 0 であることです。これは、 :where() のリファレンスページにある例で示されています。

+ +

構文

+ +{{CSSSyntax}} + +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_not/index.html b/files/ja/web/css/_colon_not/index.html deleted file mode 100644 index e86a77f80e..0000000000 --- a/files/ja/web/css/_colon_not/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: ':not()' -slug: 'Web/CSS/:not' -tags: - - ':not()' - - CSS - - Layout - - Negation - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:not' ---- -
{{CSSRef}}
- -

:not() は CSS の擬似クラスで、列挙されたセレクターに一致しない要素を表します。特定の項目が選択されることを防ぐため、否定擬似クラス (negation pseudo-class) と呼ばれています。

- -
/* 段落以外の要素を選択 */
-:not(p) {
-  color: blue;
-}
- -

:not() 擬似クラスには、使用する前に知っておいた方が良いクセやコツ、予想外の結果がいくつかあります。

- -

構文

- -

:not() 擬似クラスは引数として、1つまたは複数のセレクターをカンマで区切ったものを要求します。リストには否定セレクターや擬似要素を含めることはできません。

- -
-

複数のセレクターを指定することは実験的な機能で、広くは対応されていません。

-
- -{{csssyntax}} - -

解説

- -

:not() を使用する際のふつうではない効果や結果がいくつかありますので、使用する際には気を付けてください。

- - - -

例

- -

HTML

- -
<p>I am a paragraph.</p>
-<p class="fancy">I am so very fancy!</p>
-<div>I am NOT a paragraph.</div>
-
- -

CSS

- -
.fancy {
-  text-shadow: 2px 2px 3px gold;
-}
-
-/* '.fancy' クラスの中にない <p> 要素 */
-p:not(.fancy) {
-  color: green;
-}
-
-/* <p> 要素ではない要素 */
-body :not(p) {
-  text-decoration: underline;
-}
-
-/* <div> または <span> 要素ではない要素 */
-body :not(div):not(span) {
-  font-weight: bold;
-}
-
-/* '.crazy' または '.fancy' ではない要素 */
-/* なお、この文法は十分に対応されていません。 */
-body :not(.crazy, .fancy) {
-  font-family: sans-serif;
-}
- -

結果

- -

{{EmbedLiveSample('Examples')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}引数で単純セレクター以外も許容数量に拡張。
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}初回定義
- -

ブラウザーの互換性

- -
-

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

- -

関連情報

- - -
diff --git a/files/ja/web/css/_colon_not/index.md b/files/ja/web/css/_colon_not/index.md new file mode 100644 index 0000000000..e86a77f80e --- /dev/null +++ b/files/ja/web/css/_colon_not/index.md @@ -0,0 +1,131 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not' +tags: + - ':not()' + - CSS + - Layout + - Negation + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:not' +--- +
{{CSSRef}}
+ +

:not() は CSS の擬似クラスで、列挙されたセレクターに一致しない要素を表します。特定の項目が選択されることを防ぐため、否定擬似クラス (negation pseudo-class) と呼ばれています。

+ +
/* 段落以外の要素を選択 */
+:not(p) {
+  color: blue;
+}
+ +

:not() 擬似クラスには、使用する前に知っておいた方が良いクセやコツ、予想外の結果がいくつかあります。

+ +

構文

+ +

:not() 擬似クラスは引数として、1つまたは複数のセレクターをカンマで区切ったものを要求します。リストには否定セレクターや擬似要素を含めることはできません。

+ +
+

複数のセレクターを指定することは実験的な機能で、広くは対応されていません。

+
+ +{{csssyntax}} + +

解説

+ +

:not() を使用する際のふつうではない効果や結果がいくつかありますので、使用する際には気を付けてください。

+ + + +

例

+ +

HTML

+ +
<p>I am a paragraph.</p>
+<p class="fancy">I am so very fancy!</p>
+<div>I am NOT a paragraph.</div>
+
+ +

CSS

+ +
.fancy {
+  text-shadow: 2px 2px 3px gold;
+}
+
+/* '.fancy' クラスの中にない <p> 要素 */
+p:not(.fancy) {
+  color: green;
+}
+
+/* <p> 要素ではない要素 */
+body :not(p) {
+  text-decoration: underline;
+}
+
+/* <div> または <span> 要素ではない要素 */
+body :not(div):not(span) {
+  font-weight: bold;
+}
+
+/* '.crazy' または '.fancy' ではない要素 */
+/* なお、この文法は十分に対応されていません。 */
+body :not(.crazy, .fancy) {
+  font-family: sans-serif;
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}引数で単純セレクター以外も許容数量に拡張。
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}初回定義
+ +

ブラウザーの互換性

+ +
+

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

+ +

関連情報

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