【CSS/Sass】:isを用いて、親要素の有無や親要素の擬似クラスに応じて子要素のスタイルを指定したい場合を考えてみる

はじめに

CSSで親要素や親の擬似クラスに応じて子要素のスタイルを変更したい場合、親要素にネストさせる書き方をすると子要素と親要素の擬似クラスに関わる記述が散らばったコードになりがちです。

その場合は:isを使うことで、親要素の有無や擬似クラスに依存した子要素のスタイルを子要素にネストさせて記述できるようになります。

:isを使わない例

sample.html

<a href="" class="parent">
    <!-- 下記のspan要素を親要素のhoverに応じて拡大させたい -->
    <span class="child-circle"></span>
    <p>ここにテキストが入ります</p>
</a>

親要素のaタグがhoverされた時に子要素を拡大させたい場合、:isを使わないと以下のようになると思います。

sample1.scss

.parent{
    display: flex;
    position: relative;

    &:hover{
        .child-circle{
            scale: 1.05;            
        }
    }
}

.child-circle{
    position: absolute;
    width: 10px;
    color: red;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    transition: scale 0.3s;
}

上記のように親要素と子要素の記述の位置が近い場合はまだしも、擬似クラスの対象となる子要素が増えてくるとそれぞれの記述の位置が離れてしまい管理が煩雑になります。

可能であれば「特定の状態の時に変化するスタイル」は入れ子の中で完結させるようにしたいところ。

CSSの:isについての概略

特定の条件下でマッチする場合に効かせたいスタイルを指定したい場合は:isが有効です。

以下は:isを使ったサンプルです。

sample2.css

/* isを使わない例 */
button p,
article p,
nav p{
    font-weight: bold;
};

/* isを使った例。上の例と同じスタイルが当たる */
:is(button, article, nav) p{
    font-weight: bold;
}

:isを使った例

:isを使うことでsample1.scssは以下のように書き換えられます。

renew.scss

.parent{
    display: flex;
    position: relative;
}

.child-circle{
    position: absolute;
    width: 10px;
    color: red;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    transition: scale 0.3s;

    &:is(.parent:hover *){
        scale: 1.05;            
    }
}

このように記述した出力結果の

.child-circle:is(.parent:hover *){
    scale: 1.05;
}

も、意味的には「.parent要素がhoverしている条件を満たす.child-circle要素」を指定していることになるため、結果としてはsample1.scssと同じものを得られます。

:isを使った記述にすることで、子要素のネストとして当該スタイルを管理できるため.child-circle要素の状態違いであることがより明確になります。

コードの保守性を高めるための選択肢の一つとして試してみてください。

参考資料