はじめてGoogle Chromeで実装されて以来、2023年ついに主要全ブラウザでSCSSを使わなくてもCSSだけでネスト化・入れ子の記述が出来るようになりました。
そこでこの記事ではCSSでのネスト化についてSCSSを使ったネスト化との類似点や違いまで詳しくご紹介したいと思います。

ネスト化とは

ネスト化とはプログラミングでよく使われる用語であり、入れ子とも呼ばれる記述方法で、CSS単体では長い間、ネスト化を行うことが出来ませんでした。
ネスト化を実現するにはSCSSやSassのようなプリプロセッサを使用する必要がありました。

次のようなHTMLがあるとします。

<ul class="nav">
    <li class="item">【徹底解説】CSSのみでネスト化対応！SCSSとの類似点と違い</li>
    <li class="item">【徹底解説】CSSのみでネスト化対応！SCSSとの類似点と違い</li>
</ul>

SCSSを使ったネスト化では下のように書くことが出来ます。

.nav{
    width: 100%;
    display: flex;
    list-style: none;
    .item{

        border: 1px solid;
        color: #dc5a45;
    }
}

コンパイルしたCSSはこちら。

.nav{
    width: 100%;
    display: flex;
    list-style: none;
}
.nav .item{

    border: 1px solid;
    color: #dc5a45;
}

実装サンプルがこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

このようにCSSをネスト化する場合、今まではSCSSまたはSassを使う必要がありました。

CSSを使ったネスト化

CSSを使ったネスト化の基本形

次のようなHTMLがあるとします。

<ul class="nav">
    <li class="item">【徹底解説】CSSのみでネスト化対応！SCSSとの類似点と違い</li>
    <li class="item">【徹底解説】CSSのみでネスト化対応！SCSSとの類似点と違い</li>
</ul>

今までのCSSの書き方はこちら。

.nav{
    width: 100%;
    display: flex;
    list-style: none;
}
.nav .item{
    border: 1px solid;
    color: #dc5a45;
}

実装サンプルがこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

上のCSSをネスト化を使って書いた場合、下のようになります。

.nav{
    width: 100%;
    display: flex;
    list-style: none;
    .item{
        border: 1px solid;
        color: #dc5a45;
    }
}

実装サンプルがこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

この記述だっけを見る限り、先に示したSCSSを使ったネスト化と全く同じですね。
基本的なネスト化に関しては、SCSSを使ったネスト化と同じように使うことが出来ます。

CSSを使った記述が格段に楽になりますね。

CSSを使ったネスト化で出来ること

CSSを使ったネスト化では「&」を使うことが出来ます。

次のようなHTMLがあるとします。

<ul class="nav">
    <li class="item">【徹底解説】CSSのみでネスト化対応！SCSSとの類似点と違い</li>
    <li class="item current">【徹底解説】CSSのみでネスト化対応！SCSSとの類似点と違い</li>
</ul>

今までのCSSでの書き方はこちら。

.nav{
    width: 100%;
    display: flex;
    list-style: none;
}
.nav .item{
    border: 1px solid;
    color: #dc5a45;
}
.nav .item.current{
    color: #3d8582;
}

実装サンプルがこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

これをCSSを使ったネスト化で書くと下のように書くことが出来ます。

.nav{
    width: 100%;
    display: flex;
    list-style: none;
    .item{
        border: 1px solid;
        color: #dc5a45;
        &.current{
            color: #3d8582;
        }
    }
}

実装サンプルがこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

また、疑似クラスを書く場合も「&」を使うことが出来ます。

次のようなHTMLがあるとします。

<ul class="nav">
    <li class="item">【徹底解説】CSSのみでネスト化対応！SCSSとの類似点と違い</li>
    <li class="item">【徹底解説】CSSのみでネスト化対応！SCSSとの類似点と違い</li>
</ul>

今までのCSSでの書き方はこちら。

.nav{
    width: 100%;
    display: flex;
    list-style: none;
}
.nav .item{
    border: 1px solid;
    color: #dc5a45;
}
.nav .item:hover{
    color: #3d8582;
}

実装サンプルがこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

これをCSSを使ったネスト化で書くと以下のように書くことが出来ます。

.nav{
    width: 100%;
    display: flex;
    list-style: none;
    .item{
        border: 1px solid;
        color: #dc5a45;
        &:hover{
            color: #3d8582;

        }
    }
}

実装サンプルがこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

このように疑似クラスを指定することも出来ます。

CSSを使ったネスト化で出来ないこと

便利なCSSを使ったネスト化ですが、SCSSのように出来ないこともあります。

次のようなHTMLがあるとします。

<ul class="nav">
    <li class="nav__item">【徹底解説】CSSのみでネスト化対応！SCSSとの類似点と違い</li>
    <li class="nav__item">【徹底解説】CSSのみでネスト化対応！SCSSとの類似点と違い</li>
</ul>

CSSの命名規則の「BEM」を想定したクラス名です。
SCSSでは可能ですが、CSSを使ったネスト化の場合、下のような「&」を使ったクラス名の接続は出来ません。

.nav{
    width: 100%;
    display: flex;
    list-style: none;
    &__item{
        border: 1px solid;
        color: #dc5a45;
    }
}

実装サンプルがこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

枠線が付いたり、文字色が変わったりしませんね。

少し前の記事では

少し前のCSSのネスト化を解説した記事ではタグ名に対して直接指定するネスト化の場合は上手くいかないと書かれていることがあります。

<ul>
    <li>【徹底解説】CSSのみでネスト化対応！SCSSとの類似点と違い</li>
    <li>【徹底解説】CSSのみでネスト化対応！SCSSとの類似点と違い</li>
</ul>

2023年9月時点で上手くいかないネスト化の記述例はこちら。

ul{
    width: 100%;
    display: flex;
    list-style: none;
    li{
        border: 1px solid;
        color: #dc5a45;
    }
}

実装サンプルがこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

今見ると、正しく表示出来ていますが、2023年9月時点でタグを直接ネスト化する場合は下のように「&」を使う必要がありました。

ul{
    width: 100%;
    display: flex;
    list-style: none;
    & li{
        border: 1px solid;
        color: #dc5a45;
    }
}

実装サンプルがこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

しかし、2024年3月現在ではタグを直接ネスト化することが出来るようになりました。

まとめ

いかがでしたか？
今までは出来なかったCSSだけでのネスト化。CSSは他にも変数を使うことも出来ます。
CSSがどんどん便利になり、SCSSの機能日数いていくのは嬉しいですね。