:is()

イズ（セレクタ）

意味複数のセレクタをまとめて指定

:is()とは？

:is()は論理セレクタの一つで、複数のセレクタをグループ化して、それらに共通するスタイルを一度に適用することができます。これにより、コードの重複を避け、よりシンプルで読みやすいCSSを書くことが可能になります。

:is()の具体的な使い方

複数の見出しに同じスタイルを適用する例

<style>
  article :is(h1, h3) {
    margin-top: 40;
  }
</style>

<article>
  <h1>見出し1</h1>
  <h2>見出し2</h2>
  <h3>見出し3</h3>
</article>

article要素の中でh1、h3のいずれかに該当する要素の上部のマージンを40に設定しています。

:is()に関するよくある質問

Q. :is()の利点は何ですか？

A. :is()の主な利点は、コードの簡素化と可読性の向上です。複数のセレクタに共通のスタイルを適用する際に、セレクタの繰り返しを減らし、より簡潔なCSSを書くことができます。

Q. :is()と:where()の違いは？

A. :is()と:where()は似ていますが、主な違いは詳細度（セレクタの優先度）にあります。:is()は引数の中で最も高い詳細度を採用しますが、:where()は常に詳細度0となります。そのため、:where()はより柔軟にスタイルを上書きできます。

Q. :is()の引数に制限はある？

A. :is()の引数には、有効なCSSセレクタをカンマで区切って指定できます。ただし、擬似要素（::before, ::afterなど）は引数として使用できません。また、ブラウザによってサポートされているセレクタの種類が異なる場合があるので注意が必要です。

:is()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの:is()や::first-letter、[attr*=value]、:first-of-type、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。