CSS の新しい機能疑似クラス セレクタ :is() および :where()

CSS セレクタの構文を少し追加するだけで、大きな影響を及ぼします。

Adam Argyle

CSS を記述する際、ターゲットにするセレクタ リストが長くなってしまうことがあります。 同じスタイルルールを持つ複数の要素を指定できます。たとえば、ヘッダー要素内にある <b> タグの色を調整するには、次のように記述します。

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

代わりに :is() を使用すると、読みやすくすることができます。また、 セレクタ:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

読みやすさとセレクタの使いやすさは、 :is() と :where() が CSS に導入されます。この投稿では、これらの 2 つの機能的な疑似セレクタの構文と値について説明します。

:is() の使用前後の無限ループのビジュアル

ブラウザの互換性

:is()

対応ブラウザ

  • Chrome: 88。
  • エッジ: 88。 <ph type="x-smartling-placeholder">
  • Firefox: 78。 <ph type="x-smartling-placeholder">
  • Safari: 14。 <ph type="x-smartling-placeholder">

ソース

:where()

対応ブラウザ

  • Chrome: 88。
  • Edge: 88.
  • Firefox: 78。 <ph type="x-smartling-placeholder">
  • Safari: 14。 <ph type="x-smartling-placeholder">

ソース

:is() さんと :where() さんのご紹介

これらは機能的な疑似クラス セレクタです。末尾の () と : で始まる必要があります。これらは、要素に一致するランタイムの動的関数呼び出しと考えてください。CSS を記述すると、要素をグループ化することができます。 指定することもできます。また、特定度を変更して、特定度を無効にしたり、特定度を上げたりすることもできます。

セレクタのグループ化

グループ化に関して :is() が実行できるすべてのこと。:where() も同様です。これには、セレクタ内の任意の場所で使用すること、ネストすること、スタックすることが含まれます。使い慣れた CSS の柔軟性をフルに活用できます。次に例を示します。

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

上記の各セレクタの例は、これら 2 つのセレクタの柔軟性を示しています 関数型疑似クラスを作成しますメリットが得られるコードの領域を特定するには、 :is() または :where()。複数のカンマとセレクタを含むセレクタを探します。 できます。

:is() での単純なセレクタと複雑なセレクタの使用

セレクタについて詳しくは、Learn CSS。以下に、この機能の例として、簡単なセレクタと複雑なセレクタの例を示します。

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

現時点では、:is() と :where() は構文上互換性があります。では、それぞれの違いを見てみましょう。

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

特異性に関して、:is() と :where() は大きく異なります。特定度について詳しくは、Learn CSS の特定度モジュールをご覧ください。

つまり

  • :where() には特異性がありません。
    :where() は、関数パラメータとして渡されたセレクタリスト内のすべての特異性を圧縮します。これは、 種類選択ツール機能を使用できます。
  • :is() は、最も具体的なセレクタの特定度を取得します。
    :is(a,div,#id) の ID の特定度スコアは 100 ポイントです。

リストの中から特異性が最も高いセレクタを利用するのは、課題に過ぎなかった グループ分けに夢中になっていた頃でした。私はいつも 詳細度の高いセレクタを独自のセレクタに移動して読みやすくする それほど影響が出ないところです次に例を示します。

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

:where() では、ライブラリが特定のないバージョンを提供することを期待しています。著者のスタイルとライブラリの具体性の競合 終了する可能性があります。CSS の記述時に競合する詳細度はありません。CSS は以前から、このようなグループ化機能の開発に取り組んできました しかし まだ開拓されていない 地域です動画制作をお楽しみください 小さなスタイルシートを使用し カンマを削除するなどの操作を行います

写真提供: Markus Winkler（Unsplash）