CSSの:has()を使用すると、特定の子要素を含む親要素にスタイルを適用できる。

子要素の有無や状態によって、JavaScriptを使わずにスタイルの切り替えが可能。

基本的な使い方

.box内に.activeが存在する場合、親要素の背景色を変更。

HTML

<div class="box">
    <p class="active">テキスト</p>
</div>

CSS

.box:has(.active) {
    background-color: #f0f0f0;
}

直接の子要素を指定

>を使用すると、直下の子要素だけを対象にできる。

.box:has(> .active) {
    border: 1px solid #ccc;
}

特定の要素が存在しない場合

:not()と組み合わせて、指定した子要素が存在しない場合にスタイルを適用。

.box:not(:has(img)) {
    padding: 20px;
}

.box内にimgが存在しない場合のみ適用。

チェックボックスの状態によって変更

チェックボックスが選択されている場合、親要素の背景色を変更。

HTML

<label class="checkbox-box">
    <input type="checkbox" name="check">
    チェックする
</label>

CSS

.checkbox-box:has(input:checked) {
    background-color: #e0f2ff;
}

フォーカス時に親要素を変更

フォーム内の入力項目がフォーカスされている場合、親要素の枠線を変更。

.form-group:has(input:focus) {
    border-color: #007bff;
}

次の要素によってスタイルを変更

:has()は子要素だけでなく、隣接する兄弟要素の判定にも使用できる。

h2:has(+ p) {
    margin-bottom: 10px;
}

直後にpが存在するh2だけに適用。

複数の条件を指定

複数のセレクターをカンマ区切りで指定。

.box:has(img, video) {
    padding: 0;
}

imgまたはvideoが存在する場合に適用。

対応ブラウザ

• Chrome 105以降
• Edge 105以降
• Safari 15.4以降
• Firefox 121以降

主要なモダンブラウザで対応済み。古いブラウザでは動作しない場合がある。

注意点

• :has()の中に別の:has()は指定できない。
• ::beforeや::afterなどの疑似要素は基本的に指定不可。
• 広範囲を対象とする複雑な条件はパフォーマンスに注意。
• 非対応ブラウザでは:has()を含むCSSルールが適用されない。