📝

【CSS】CSSがネストに対応し始めた件

2023/06/22に公開

はじめに

今まで、cssにおけるネスト(入れ子構造)はSass^[1]でしか実現できなかったのだが、遂に一部のブラウザで素のCSSでもネストができるようになったので、メモ。

※本記事執筆時点でChrome最新版で対応済

例えば、以下のようなhtmlの構造があったとする。

sample.html

<div class="class1">
    class1内部です
    <h2>class2ヘッダです</h2>
    <div class="class2">
        class2内部です
    </div>
</div>

これに対して、従来のCSSだと以下のような記法となる。

sample1.css

.class1{
    color: #000000;
}
.class1 h2{
    color: #ff0000;
}
.class1 .class2{
    color: #0000ff;
}

だが、これからcssのネストに対応したブラウザでは、以下のような記法が有効となる。

sample2.css

.class1{
    color: #000000;
    & h2{
        color: #ff0000;
    }
    & .class2{
        color: #0000ff;
    }
}

どうだろうか。前者の記法はやはり、ネストされている子要素の一つ一つについてブロックを書かなければならず、コードが長くなり可読性も落ちてしまう。
しかし、後者の記法が有効になったことで可読性が落ちづらく、整理された書き方ができるようになったのでは無いだろうか。

詳しく説明をすると、親要素(今回だとclass1)のブロック内で& [セレクタ] {}のような書き方をすることでネストが有効となる。

ちなみに今回のh2タグのように、タグを直接指定するような場合はセレクタの前に&のような記号^[2]が必要不可欠だが、クラスやidを指定する場合はそれがなくても良い。
つまり、以下のような記法でも有効となる。

sample3.css

.class1{
    .class2{
        color: #0000ff;
    }
}

ネストが使用可能になったおかげでcssがかなりスマートに書けるようになったので、皆でリファクタリングをしよう。

脚注