CSSを書いていると、「.card」「.card .title」「.card .title span」と、同じ親の名前を何度も打ち込む場面が必ず出てきます。
地味な作業ですが、これが積み重なると本当に面倒。打ち間違いも増えますし、あとから親のクラス名を変えたくなったとき、ファイル中をgrepして一括置換…なんて作業に泣かされた方も多いのではないでしょうか。
その面倒を解消するために、長らく「Sass（CSSプリプロセッサ）」が使われてきました。私も10年以上お世話になっています。ただ、Sassを使うには環境構築やコンパイルの手間が必要で、ちょっとした修正には少々大げさなんですよね。
そこで主役に躍り出たのが、CSS本体に標準搭載された「ネスト（入れ子）」です。この記事では、Sassなしで使えるネイティブCSSネストの書き方と、初心者がつまずきやすい「&（アンパサンド）」の使いどころ、対応ブラウザやSassとの違いまでを、サンプルコード付きでまとめて解説します。
ビルドツールもプラグインも一切不要。いつもの.cssファイルにそのまま書けます。これが想像以上に快適で、私の書き方もすっかり変わりました。Web制作を始めたばかりの方ほど、早めに知っておいて損のない機能です。
そもそもCSSのネスト（入れ子）とは？
ネストとは、その名のとおりセレクタを「入れ子」にして書ける仕組みのことです。親要素のルールの中に、子要素のスタイルをそのまま埋め込めます。
言葉だけだとピンと来ないので、まずは見比べてみましょう。これまでのCSSはこう書いていました。
.card {
padding: 16px;
}
.card .title {
font-size: 20px;
}
.card .title span {
color: #2d8cff;
}「.card」を3回も書いていますね。これをネストで書き直すと、こうなります。
.card {
padding: 16px;
.title {
font-size: 20px;
span {
color: #2d8cff;
}
}
}どうでしょう。HTMLの構造とCSSの構造が見た目でそろうので、「どこが何のスタイルか」が一目で追えます。関連するスタイルがひとかたまりになるので、可読性とメンテナンス性がぐっと上がるのが最大のメリットです。
親のクラス名を変えたいときも、いちばん外側の一行を直すだけ。あの一括置換の儀式から解放されます。
基本の書き方｜まずはこれだけ覚えればOK
使い方はシンプルで、スタイルを書きたい要素のルールの中に、子要素のセレクタをそのまま書くだけです。
.menu {
list-style: none;
li {
display: inline-block;
}
a {
text-decoration: none;
}
}この場合、内側の「li」は自動的に「.menu li」、「a」は「.menu a」と解釈されます。つまり、親セレクタと子セレクタの間に半角スペース（子孫セレクタ）が補われるイメージです。
何段階でもネストできますが、深くしすぎると逆に読みにくくなります。私の経験則では、深くても2〜3段までに抑えるのが見やすさのバランス的にちょうどいいです。HTMLの入れ子をそのまま全部CSSに写し取る必要はありません。
つまずきポイント「&（アンパサンド）」の正体
ネストを使い始めると、ほぼ確実に「&」という記号に出会います。私も最初は「これ何のために付けるの？」と戸惑いました。ここをスッキリ理解できると、ネストはほぼ攻略したも同然です。
「&」は、ざっくり言えば「自分自身（親セレクタ）」を指すプレースホルダーです。つまり「&」と書いた場所に、親のセレクタがそのまま差し込まれます。
いちばん効いてくるのが、ホバーなどの擬似クラスや、同じ要素に重ねるクラス（複合セレクタ）です。
.btn {
background: #2d8cff;
&:hover {
background: #1b6fd6;
}
&.is-active {
border: 2px solid #1b6fd6;
}
}ここで「&:hover」は「.btn:hover」、「&.is-active」は「.btn.is-active」になります。もし「&」を付けずに「.is-active」とだけ書くと、間にスペースが補われて「.btn .is-active」という別物（子孫セレクタ）になってしまうので要注意です。同じ要素にくっつけたいときは「&」が必須、と覚えておくと事故が減ります。
結合子（> や + など）を使うときも、「&」を添えておくのが安全です。
.list {
& > li {
border-bottom: 1px solid #ccc;
}
}正直、慣れるまでは「迷ったら&を付ける」くらいの気持ちでちょうどいいです。付けて困る場面はほぼありません。
参考： MDN Web Docs
メディアクエリも入れ子にできる
地味にうれしいのが、メディアクエリ（@media）もネストできること。レスポンシブ対応で「PCとスマホの記述があちこちに散らばる問題」が一気に解決します。
.container {
width: 90%;
@media (min-width: 768px) {
width: 60%;
}
}これまでは「.container」の通常スタイルと、ファイル下部にまとめた@media内の「.container」が離れた場所にあって、修正のたびに行ったり来たり…。それが、ひとつの要素のルール内で完結します。
「この要素は画面幅が広いときどうなるんだっけ？」という確認が、その場でできるのは想像以上に快適です。私はこれだけでもネストを使う価値があると感じています。
Sassとの違いと、知っておきたい注意点
「だったらもうSassいらないのでは？」と思うかもしれません。日常的なネストだけなら、確かにかなりの部分をネイティブCSSで置き換えられます。ただ、いくつか違いはあります。
まず、Sassでおなじみの「&__title」のような文字列の連結（BEM記法での省略）は、ネイティブCSSではできません。これはセレクタの仕様上の制限で、連結したいなら最初から「.card__title」とフルで書く必要があります。
また、変数やmixin、関数といったSassの強力な機能はネスト単体ではカバーできません（CSS変数で代替できる部分もあります）。大規模な設計ではSassの出番がまだ残る、というのが正直なところです。
もうひとつ、詳細度の話。ネストで使う「&」の詳細度は「:is()」と同じ扱いになり、リスト内でいちばん高い詳細度で計算されます。意図せずスタイルが強くなりすぎないよう、頭の片隅に置いておくと安心です。
対応ブラウザはどうなっている？
新しい機能でいちばん気になるのが、対応ブラウザですよね。結論から言うと、ネイティブCSSネストはすでに主要ブラウザがすべて対応済みです。
Chrome・Edge・Safari・Firefoxの最新版で問題なく動きます。Firefoxが最後発でしたが、それも2023年には対応が完了しており、2026年時点では「Baseline（広く使える機能）」として扱われています。つまり、いま新しく作るサイトであれば、よほど古い環境を相手にしない限り、安心して使い始められる段階に来ています。
とはいえ、業務でかなり古いブラウザまでサポートが必要なケースもあるはず。その場合は、SassやPostCSS、Lightning CSSといったツールを通して、通常のCSSに変換（コンパイル）してから配信すれば安全です。ターゲットのブラウザ次第で使い分ける、という発想で十分でしょう。
参考： Can I use
まとめ
CSSのネスト（入れ子）について、書き方の基本から「&」の使いどころ、メディアクエリのネスト、Sassとの違い、対応ブラウザまで一気に見てきました。
やることはシンプルで、親ルールの中に子のスタイルを書き、同じ要素にくっつけたいときは「&」を添えるだけ。たったこれだけで、CSSがHTMLの構造どおりに整理され、修正のたびに迷子になる時間がぐっと減ります。
長年Sassに頼ってきた私でも、ちょっとした調整や小規模な制作なら、もうネイティブのネストで済ませることが増えました。環境構築もコンパイルもいらない手軽さは、一度味わうと戻れません。
環境を選ばずいつもの.cssにそのまま書けて、コードの見通しまで良くなるネストは、これからのCSSの標準作法になっていく機能です。まだ試していないなら、次に書く小さなパーツからでもネストに置き換えてみてください。書き心地の違いに、きっと驚くはずです。
