From 9f8151bf160f91c5af06e8c786fb1728d68bfd79 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 5 Jan 2022 01:16:45 +0900 Subject: 2021/11/22 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_is/index.md | 207 +++++++++++++++++++----------------- 1 file changed, 112 insertions(+), 95 deletions(-) (limited to 'files/ja/web/css/_colon_is') diff --git a/files/ja/web/css/_colon_is/index.md b/files/ja/web/css/_colon_is/index.md index 88c22d086d..c5f871bbee 100644 --- a/files/ja/web/css/_colon_is/index.md +++ b/files/ja/web/css/_colon_is/index.md @@ -1,27 +1,25 @@ --- title: ':is() (:matches(), :any())' -slug: 'Web/CSS/:is' +slug: Web/CSS/:is tags: - ':is' - CSS - - Experimental - - Pseudo-class - - Reference - - Selector - - Selectors - - Web + - 実験的 + - 擬似クラス + - リファレンス + - セレクター + - ウェブ translation_of: 'Web/CSS/:is' --- -

{{CSSRef}}

+{{CSSRef}} -
-

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

-
+> **Note:** `:matches()` は `:is()` に改名されました。 ([CSSWG issue #3258](https://github.com/w3c/csswg-drafts/issues/3258)) -

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

+**`:is()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)関数で、セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。数多くのセレクターを小さくまとめて書くのに便利です。 -
/* header, main, footer 要素の中の段落で
-   マウスポインタが通過中のものをすべて選択 */
+```css
+/* header, main, footer 要素の中の段落で
+   マウスポインターが通過中のものをすべて選択 */
 :is(header, main, footer) p:hover {
   color: red;
   cursor: pointer;
@@ -34,13 +32,16 @@ footer p:hover {
   color: red;
   cursor: pointer;
 }
-
+``` -

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

+擬似要素は `:is()` のセレクターリストでは無効です。 -

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

+なお、現在のところ、ブラウザーはこの機能を `:matches()` や、古いバージョンの Chrome, Firefox, Safari では、さらに古い接頭辞付きの擬似クラス — `:any()` で対応しています。 `:any()` は `:matches()`/`:is()` とまったく同じものとして動作しますが、ベンダー接頭辞が必要であり、[複合セレクター](/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors)に対応していません。 -
/* -*-any() および :matches() と後方互換性のあるバージョン
+後方互換性のために古い擬似クラスを使用することができます。
+
+```css
+/* -*-any() および :matches() と後方互換性のあるバージョン
    (無効なセレクターがあるとルール全体が無効になるため、
    セレクターを単一のルールにグループ化することはできません。) */
 :-webkit-any(header, main, footer) p:hover {
@@ -55,46 +56,58 @@ footer p:hover {
   color: red;
   cursor: pointer;
 }
-
+``` + +### :is() と :where() の違い + +この 2 つの違いは、 `:is()` がセレクター全体の詳細度にカウントされる（最も詳細な引数の詳細度を取る）のに対し、 [`:where()`](/ja/docs/Web/CSS/:where) は詳細度の値が 0 であることです。これは、 [`:where()` 参照ページの例](/ja/docs/Web/CSS/:where#examples)で実証されています。 -

セレクターの解釈の許容

-

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

+### セレクターの解釈の許容 -

CSS でセレクターリストを使用している場合、セレクターのどれかが無効な場合、リスト全体が無効とみなされます。 :is() や :where() を使用している場合、1 つでも解釈に失敗するとセレクターのリスト全体が無効とみなされるのではなく、不正なセレクターや対応していないセレクターは無視され、他のセレクターが使用されます。 +仕様では `:is()` と `:where()` が[省略可能なセレクターリスト](https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list)を受け入れることを定義しています。 -

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

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

+`:unsupported` をに対応していないブラウザーでも、正しく解釈して `:valid` に一致します。 -
:valid, :unsupported {
+```css
+:valid, :unsupported {
   ...
-}
+} +``` -

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

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

例

+## 例 -

クロスブラウザーの例

+### クロスブラウザーの例 -
<header>
-  <p>This is my header paragraph</p>
-</header>
+```html
+

+  
This is my header paragraph

+

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

+  
    
+    
  • This is my first
    list item
    • 
+    
  • This is my second
    list item
    • 
+  

+

 
-<footer>
-  <p>This is my footer paragraph</p>
-</footer>
+ +``` -
:-webkit-any(header, main, footer) p:hover {
+```css
+:-webkit-any(header, main, footer) p:hover {
   color: red;
   cursor: pointer;
 }
@@ -113,9 +126,10 @@ footer p:hover {
   color: red;
   cursor: pointer;
 }
-
+``` -
let matchedItems;
+```js
+let matchedItems;
 
 try {
   matchedItems = document.querySelectorAll(':is(header, main, footer) p');
@@ -141,15 +155,17 @@ function applyHandler(elem) {
   elem.addEventListener('click', function(e) {
     alert('This paragraph is inside a ' + e.target.parentNode.nodeName);
   });
-}
+} +``` -

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

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

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

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

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

+`:is()` 擬似クラスは CSS セレクターをとても簡潔にすることができます。例えば以下の CSS の場合、 -
/* 3層（以上）の順序なしリストに四角形を使用 */
+```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,
@@ -164,24 +180,27 @@ 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層（以上）の順序なしリストに四角形を使用 */
+```css
+/* 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 セレクターの簡略化

+### section セレクターの簡略化 -

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

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

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

+例えば、 `:is()` を使わずに、異なる深さの {{HTMLElement("h1")}} 要素にスタイルを適用すると、とても複雑になります。 -
/* Level 0 */
+```css
+/* Level 0 */
 h1 {
   font-size: 30px;
 }
@@ -198,11 +217,12 @@ nav section h1, nav article h1, nav aside h1, nav nav h1 {
 }
 /* Level 3 */
 /* ... 考えたくありません! */
-
+``` -

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

+`:is()` を使用すると、ずっと簡単になります。 -
/* Level 0 */
+```css
+/* Level 0 */
 h1 {
   font-size: 30px;
 }
@@ -221,43 +241,40 @@ h1 {
 :is(section, article, aside, nav) h1 {
   font-size: 15px;
 }
-
+``` -

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

+### :is() は擬似要素を選択しない +The `:is()` pseudo-class does not match pseudo-elements. So rather than this: -

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

+```css example-bad +some-element:is(::before, ::after) { + display: block; +} +``` + +instead do: -

構文

+```css example-good +some-element::before, +some-element::after { + display: block; +} +``` + +## 構文 {{CSSSyntax}} -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

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