:has疑似クラスの使い方

2023年5月現在、殆どのモダンブラウザは:has擬似クラスを利用することができるようになりました。この擬似クラスは親や子と連動したスタイルを適用する際に有用です。

例

エラーのある入力行だけスタイルを変更する

:has擬似クラスを利用することで、特定の要素を子要素に含めている要素にスタイルを適用する事ができます。そのため、エラーのある入力業にだけスタイルを適用する、といったことが可能です。

Don't have error

Have error *

SCSS

.c-form {
    max-width: 320px;

    &__row {
        padding: 1rem;
    }

    &__label {
        display: block;
    }

    &__field {
        border: 1px solid #aaa;
        color: #333;
        background: #fff;

        &.has-error {
            border-color: #f00;
        }
    }

    &__row:has(&__field.has-error) {
        background: #fdd;
    }
    &__row:has(&__field.has-error) &__label {
        color: #f00;
    }
}

HTML

<div class="c-form">
    <div class="c-form__row">
        <label class="c-form__label">Don't have error</label>
        <input type="text" class="c-form__field" />
    </div>
    <div class="c-form__row">
        <label class="c-form__label">Have error *</label>
        <input type="text" class="c-form__field has-error" />
    </div>
</div>

マウスが乗っている要素以外の兄弟要素のスタイルを変更する

兄弟要素のスタイルを変更する際、以前はJavaScriptを活用する必要がありました。しかし、:has擬似クラスを利用することで、CSSだけで実現することが可能です。

SCSS

.c-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    flex-grow: 1;
    max-width: 320px;

    &__item {
        background: #ccc;
        aspect-ratio: 1 / 1;
        transition: opacity .3s;
    }

    &:has(&__item:hover) &__item:not(:hover) {
        opacity: .6;
    }
}

HTML

<div class="c-grid">
    <div class="c-grid__item"></div>
    <div class="c-grid__item"></div>
    <div class="c-grid__item"></div>
    <div class="c-grid__item"></div>
    <div class="c-grid__item"></div>
    <div class="c-grid__item"></div>
    <div class="c-grid__item"></div>
    <div class="c-grid__item"></div>
    <div class="c-grid__item"></div>
</div>