【シーエスエスネスティング】

CSSネスティングとは？

最終更新: 2026年10月4日

💡 素のCSSでスタイルを入れ子に

CSSのスタイルルールを入れ子にして、外側のセレクタとの関係を記述する機能。Sassなどで変換せず、ブラウザがCSSとして解釈する。&で外側のルールが対象にする要素を参照できるが、Sassとすべて同じ書き方ではない。

📌 このページのポイント

左と右は、この単一クラスの例では同じ対象に適用します。入れ子はHTMLの直下の親子だけを表すものではなく、Sassと構文や詳細度がすべて同じでもありません。

ひよこ

Sassの入れ子と同じことができるの？

ペンギン先生

入れ子で書ける点は似ているけれど、完全に同じではないよ。ネイティブCSSではブラウザが直接解釈するので、ネスティングのためだけにSassなどで変換する必要はないんだ。

ひよこ

&はどんなときに使うの？

ペンギン先生

たとえば.cardの中に.titleを書くと、.cardの子孫にある.titleが対象になる。&:hoverなら、.card自身にポインターが重なった状態を表せるよ。&なしの:hoverは子孫を対象にするので、意味が変わるんだ。

ひよこ

書き方はSassと全く同じなの？

ペンギン先生

divのような要素セレクタは、& divとしなくてもそのままネストできるよ。一方、Sassのように.cardの中で&__titleと書いて.card__titleを作ることはできない。BEMなどのクラス名を文字列として連結する機能ではないんだ。

ひよこ

どのブラウザでも使えるの？

ペンギン先生

対応はブラウザの種類とバージョン、使う構文によるよ。古いブラウザやアプリ内のWebViewを対象にする場合もあるので、対応表と実際の表示を確認しよう。ネスティングへの対応だけで、CSSの新しい構文すべてが使えるとは限らないんだ。

ひよこ

じゃあSassはもういらなくなるのかな？

ペンギン先生

ネスティングが目的ならネイティブCSSを使えるけれど、Sassにはミックスインや関数など別の機能もあるよ。既存のコードや必要な機能に合わせて選ぶといいね。Sassのコードをそのまま移すときは、書き方や詳細度の違いにも注意しよう。

まとめ：ざっくりこれだけ覚えればOK！

「CSSネスティング」って出てきたら「CSSを入れ子で書けるネイティブ機能」と思えばだいたいOK！

📖 おまけ：英語の意味

「CSS Nesting」＝ CSSの入れ子記法

💬 nestingは「入れ子にする」という意味だよ。外側のスタイルルールの中に、関連する別のルールを記述することを表しているんだ

参考資料