CSSの:where()疑似クラスで複数のセレクタをグループ化し、特異性に影響を与えずにスタイルを適用する方法をわかりやすく解説

:where()は、複数のセレクタをグループ化し、スタイルを適用するための擬似クラスです。このグループ内のセレクタにスタイルを適用する際、CSSの「特異性」(別にCSSで指定しているもの)に影響を与えないという特徴があります。

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

• :where(selector1, selector2, ...): 指定されたセレクタのいずれかに一致する要素にスタイルを適用しますが、特異性に影響を与えません。

注意点と関連情報

:where()は、複数のセレクタをまとめるのに非常に便利ですが、特異性を0に保つため、他のスタイルが優先されることがある点に注意が必要です。また、通常のセレクタと組み合わせることで、より柔軟なスタイル適用が可能です。

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

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

:where()は複数のセレクタを受け取りますが、無効なセレクタや間違った書き方が含まれている場合、機能しません。特に疑似要素や非標準のセレクタが指定されていると、:where()は適用されません。
対策：:where()に含まれるセレクタが有効であるか確認し、HTMLやCSSの仕様に準拠したセレクタが指定されているかチェックします。例えば、:where(h1, .class)のように有効なセレクタを使用します。

:where()が適用される要素が正しく指定されていない

:where()で指定したセレクタが、実際のHTMLの要素と一致していない場合、スタイルは適用されません。例えば、間違ったクラス名やタグ名を指定しているとスタイルが反映されないことがあります。
対策：HTML構造と一致したセレクタが:where()内で指定されているか確認します。対象となる要素が意図したものであるかをチェックします。

表示例

CSS :where()

以下の例では、p、div要素に対して、共通のスタイルが適用されますが、特異性のあるspanは上書きされないため影響を与えません。

HTMLコード

<div class="css-sample-container">
    <p class="css-sample-item">この段落は where() でスタイルが適用されています。</p>
    <div class="css-sample-item">この div 要素も同様です。</div>
    <span class="css-sample-item">この span 要素にも適用されています。</span>
</div>

CSSコード

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

.css-sample-item {
    padding: 10px;
    margin: 10px;
    border: 2px solid #000;
    font-size: 18px;
}
 .css-sample-container span {
    border-color: #000000;
    background-color: #ffffff;
}
.css-sample-container :where(p, div, span) {
    border-color: #007bff;
    background-color: #e0f7fa;
}

表示結果

まとめ

• :where()は、複数のセレクタに対してスタイルをまとめて適用するための強力なツールです。
• 特異性に影響を与えないため、他のスタイルが優先されることがあります。
• 柔軟なスタイル適用が可能であり、特異性を気にせずに共通のスタイルを適用したいときに役立ちます。