「同じ親セレクタを毎行書くのが面倒…」
CSS を書いていれば誰もが感じるストレスです。これまでは Sass / SCSS や PostCSS などのプリプロセッサに頼るしかなかった「ネスト」が、ついに ブラウザがそのまま理解してくれる時代になりました。
それが ネイティブ CSS Nesting です。ビルドツール不要、Sass 不要。素の .css ファイルに入れ子で書けます。
この記事では、基本構文から & 記号の使い分け、メディアクエリのネストまで、実用に必要な知識を一気にまとめます。これでモダンCSS入門シリーズも最終回です。
この記事のゴール
ネイティブ CSS Nesting の構文を理解し、Sass を入れずに同等の可読性で CSS を書けるようになることです。Sass 経験者向けに「ここが違う」も解説します。
基本構文
セレクタをそのまま中括弧の中に書くと、入れ子として解釈されます。
/* 従来 */
.card { padding: 16px; }
.card .title { font-size: 1.25rem; }
.card .body { color: #555; }
/* ネスト */
.card {
padding: 16px;
.title {
font-size: 1.25rem;
}
.body {
color: #555;
}
}これだけです。ブラウザがそのまま解釈します。コンパイル不要。
& 記号(親セレクタの参照)
ネスト中に & を使うと、親セレクタそのものを参照できます。
.btn {
padding: 8px 16px;
/* .btn:hover と同じ意味 */
&:hover {
background: #0ea5e9;
}
/* .btn.primary と同じ意味(.btn と .primary の両方を持つ要素) */
&.primary {
color: white;
}
/* .form .btn と同じ意味(親に .form があるとき) */
.form & {
width: 100%;
}
}| パターン | 展開後 | 意味 |
|---|---|---|
&:hover | .btn:hover | 親に擬似クラスをくっつける |
&.active | .btn.active | 親に追加のクラスをくっつける |
& + & | .btn + .btn | 隣り合う親要素 |
.parent & | .parent .btn | 逆方向(親が .parent の中にあるとき) |
特に .parent &(逆ネスト) は Sass 経験者にも便利な書き方です。
メディアクエリのネスト
メディアクエリも入れ子で書けます。
.card {
padding: 12px;
@media (min-width: 640px) {
padding: 24px;
}
}1つのセレクタの中で「画面幅ごとの値」を完結できるので、「ベースの定義はここ、ブレークポイントごとの上書きはずっと下の方」というバラバラ問題が解消します。
前回紹介した コンテナクエリ ともシームレスに組み合わせられます。
.card-wrapper {
container-type: inline-size;
.card {
flex-direction: column;
@container (min-width: 480px) {
flex-direction: row;
}
}
}擬似クラスと組み合わせる実用例
:has()(第1回)や :is()(第3回)とも自然に組み合わせられます。
.menu-group {
background: white;
/* 現在地のリンクを持つ場合は背景色を変える */
&:has(a[aria-current="page"]) {
background: #f0f9ff;
}
/* ネスト内で :is() も使える */
& :is(a, button) {
color: #0ea5e9;
}
}連載で学んだモダン CSS の機能たちが、ネストでより読みやすくまとまります。
Sass / SCSS との違い
Sass を使ったことがある方は、ほぼ同じ感覚で書けます。ただし 重要な違いがいくつかあります。
| 項目 | Sass / SCSS | ネイティブCSS |
|---|---|---|
| 要素セレクタの直接ネスト | h2 { ... } で書ける | & h2 か & > h2 が安全 |
& の連結 | &--primary が .btn--primary に展開 | &--primary は不可(BEM の連結は無理) |
| 変数 | $primary: #... | --primary: #...(CSS Custom Properties) |
@mixin / @include | あり | なし |
@extend | あり | なし |
| ビルド | 必要 | 不要 |
注意: 要素セレクタの「型セレクタネスト」
これは多くの人が引っかかるポイントです。
/* ❌ 古いブラウザでは効かなかった書き方 */
.card {
h2 { font-size: 1.5rem; }
}
/* ✅ 安全な書き方 */
.card {
& h2 { font-size: 1.5rem; }
}2023年12月のアップデートで & h2 の & 省略にも対応しましたが、互換性を考えると & をつける癖にしておくと事故が減ります。
注意: &--primary で BEM できない
Sass の便利機能だった BEM 連結(&--primary → .btn--primary) は、ネイティブCSS では使えません。
/* Sass ではOK、ネイティブCSS ではNG */
.btn {
&--primary { color: white; }
}
/* ネイティブCSS で同じことをしたいなら */
.btn-primary { color: white; }
/* または */
.btn.primary { color: white; }これは構文上の制約で、ネスト内では & が 単独のセレクタ要素として扱われるためです。
ブラウザ対応
ネイティブ CSS Nesting は Baseline 2023(2023年12月) 入り。Chrome / Edge / Safari / Firefox の安定版すべてで利用できます。
万が一の互換性が心配なら @supports で囲めますが、2026年現在では 囲む必要のないレベルまで普及しています。
つまずきやすいポイント
⚠ ここは要注意
深すぎるネストは 特異性(specificity)が高くなりすぎて 上書きが効かない CSS を生みます。Sass 時代から受け継がれる教訓は健在です。
- ネストは2〜3階層まで: 深くするほど特異性が上がり、再利用しにくくなる
&を省略しない: 要素セレクタ(h2など)は& h2と書くのが安全- BEM連結は無理:
&--primaryで連結はできないので、命名規則の見直しが必要 - 特異性は Sass と同じ:
.card .titleと.card { .title }の特異性は 同じ。ネストしても弱くはなりません
まとめ
ネイティブ CSS Nesting を使うと、以下が実現できます。
- ✅ Sass / SCSS なしで ネストの可読性が手に入る
- ✅
&で 親セレクタとの組み合わせが自由に書ける - ✅ メディアクエリやコンテナクエリを コンポーネント単位でまとめられる
- ✅ ビルドツール不要、
.cssをそのまま読み込むだけでOK
「Sass を入れる理由がほぼなくなった」 と言われるほど、CSS 単体の表現力は劇的に向上しています。新規プロジェクトを始めるなら、まずネイティブの機能だけで書いてみて、本当に必要な機能が出てきたときだけプリプロセッサを検討する、という流れがおすすめです。
モダンCSS入門シリーズのまとめ
これで全4回の連載が完結しました。
- 🎯 第1回:
:has()擬似クラス — 親要素を選択する5つのパターン - 🎯 第2回: コンテナクエリ — 親要素の幅でレスポンシブする
- 🎯 第3回:
:is()/:where()— 重複セレクタの解消と特異性 - 🎯 第4回: ネイティブ CSS Nesting(この記事)
これら4つの機能はどれも 2023年に Baseline 入り したばかりの新世代CSSです。組み合わせて使うことで、JavaScript / Sass / 補助ツールに頼っていた多くの処理を CSS 単独で書けるようになります。
ぜひ実プロジェクトで活用してみてください。
それでは、また別の連載でお会いしましょう!