CSSの:is()で複数のセレクタをまとめて指定し、スタイルを適用する方法をわかりやすく解説

2024.09.13
スポンサーリンク

:is() は、CSSにおいて複数のセレクタをまとめて記述できる擬似クラスです。:is() 内に指定されたセレクタのいずれかに一致した要素に対してスタイルを適用することができます。

スポンサーリンク

:is() の値とその効果の一覧

  • :is(selector1, selector2, ...) – 複数のセレクタを指定し、そのいずれかに一致する要素に対してスタイルを適用します。

注意点や関連情報

:is() の強力な点は、複数のセレクタを一つにまとめることでコードの冗長性を減らすことができる点です。ただし、指定するセレクタによってはパフォーマンスに影響を与える場合があるため、適切な使い方が推奨されます。

:is()が効かない理由として考えられること

無効なセレクタが含まれている

:is()内に記載されるセレクタが無効である場合、この擬似クラスは機能しません。例えば、誤ったセレクタやサポートされていないセレクタが含まれていると、全体が無効となる可能性があります。
対策：:is()内に正しいセレクタを記載しているか確認します。セレクタ同士が正しい組み合わせで使用されているかもチェックします。

共通するCSSコード

.css-sample-container {
    padding: 20px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

.css-sample-item {
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
}

.css-sample-container :is(h1, h2, h3) {
    color: blue;
    font-weight: bold;
}

.css-sample-container :is(.highlight, .important) {
    background-color: yellow;
}

表示例

CSS :is(h1, h2, h3)

HTMLコード

<div class="css-sample-container">
    <h1>これは見出し1です</h1>
    <h2>これは見出し2です</h2>
    <p>これは段落です</p>
    <h3>これは見出し3です</h3>
</div>

CSSコード

.css-sample-container :is(h1, h2, h3) {
    color: blue;
    font-weight: bold;
}

同じ動作をするCSSコード

.css-sample-container h1 , .css-sample-container h2 , .css-sample-container h3 {
    color: blue;
    font-weight: bold;
}

表示結果

これは見出し1です

これは見出し2です

これは段落です

これは見出し3です

この例では、<h1>, <h2>, <h3> タグが青色になり、太字になっています。:is() を使うことで、複数のタグに一度にスタイルを適用できます。

CSS :is(.highlight, .important)

HTMLコード

<div class="css-sample-container">
    <p class="highlight">強調されたテキストです。</p>
    <p class="important">重要なテキストです。</p>
    <p>通常のテキストです。</p>
</div>

CSSコード

.css-sample-container :is(.highlight, .important) {
    background-color: yellow;
}

表示結果

強調されたテキストです。

重要なテキストです。

通常のテキストです。

この例では、.highlight クラスと .important クラスが適用された段落に黄色の背景色が適用されます。

まとめ

  • :is() は、複数のセレクタを一つにまとめることで、スタイルの冗長性を削減します。
  • 複数のセレクタのいずれかに一致する要素にスタイルを適用することができます。
  • 適切に使用すれば、コードの簡潔さと可読性が向上します。
スポンサーリンク