はじめに
これまで、CSSで入れ子構造（ネスト）のスタイルを簡潔に書くためには、Sass（SCSS）やLess、PostCSSといったプリプロセッサの導入が不可欠でした。
しかし、CSSの標準仕様として CSS Nesting（ネイティブCSSネスト） の策定が進み、現在では主要なすべてのモダンブラウザで、プリプロセッサなしの素のCSSファイルでネスト記述が動作するようになっています。
本記事では、この標準化されたCSS Nestingの正しい書き方、注意すべき挙動、そしてSassのコンパイル結果との細かな違いについて解説します。
1. ネイティブCSSネストの基本形
標準のCSSネストは、Sassとほぼ同様の直感的な記法で記述できます。
記述例
.card {
background-color: #fff;
padding: 20px;
border-radius: 8px;
/* 子要素を直接ネストして指定する */
.card-title {
font-size: 1.5rem;
color: #333;
}
/* & 記号を使って疑似クラス（hoverなど）を指定する */
&:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
}
かつての仕様案では、ネストの先頭に &（アンパサンド）を付けることが必須でしたが、現在の最終仕様では & なしで直接クラス名（.card-title）やHTML要素（h3）をネストして記述することが可能 になっています。
2. Sassとの違いと注意点
長年Sassを書いてきた開発者が最も注意しなければならないのが、「BEMなどのクラス名結合（文字列結合）には使えない」 という点です。
Sass（SCSS）でよくある書き方（文字列結合）
/* Sassでは動くが、標準CSSネストでは動かない！ */
.button {
display: inline-block;
&--large { /* .button--large にコンパイルされる */
padding: 15px 30px;
}
}
標準CSSネストでの挙動（エラーまたは意図しない動作）
標準CSSのネストでは、& は「親のセレクタのオブジェクト（要素）そのもの」を指し示すプレースホルダーとして機能します。文字列の単純結合はできないため、上記の &--large は無効な指定になります。
正しい記述方法
標準CSSでネストする場合は、クラス名の部分結合ではなく、クラス全体を指定する必要があります。
.button {
display: inline-block;
&.button--large { /* または &.btn-large のように結合 */
padding: 15px 30px;
}
}
3. &（アンパサンド）を後ろに置くパターン
& のもう一つの便利なテクニックは、ネストの先頭だけでなく、末尾や中間にも配置できる点です。これを使うことで、「特定の親要素の中にいる時だけスタイルを変更する」という指定が、子要素のスタイルブロックの中に内包して書けるようになります。
実装例
.theme-text {
color: #333; /* デフォルトカラー */
/* 親要素に .dark-mode クラスがついている場合 */
.dark-mode & {
color: #fff; /* ダークモード時のカラー */
}
}
これは、従来の .dark-mode .theme-text { color: #fff; } と全く同じセレクタ指定になります。
まとめと導入の判断
CSS Nestingは、すでにすべてのモダンブラウザで実装が完了しています。
- Sassからの完全移行の判断:
変数の管理、Mixin（関数）による複雑なスタイル生成、BEMの文字列結合（
&__child）などを多用しているプロジェクトでは、引き続きSassやPostCSSを使う意義があります。 - ネイティブCSSネストが向いている場面: コンポーネントライブラリの作成や、ビルドプロセスを極限までシンプルに保ちたい（Sassコンパイルの待ち時間をなくしたい）静的サイトの制作においては、ネイティブCSSネストへの移行は非常に有効です。
Web標準のネスト構造のルールを正しく理解し、無駄のない美しいスタイルシートを設計していきましょう。