Sassなどのプリプロセッサなしで、セレクタを入れ子（ネスト）にして書けるネイティブCSS機能です。親子関係のスタイルをまとめて記述でき、&で親セレクタを参照します。ビルドツール不要でSass風の書き心地を実現します。
.parent { .child { ... } &:hover { ... } }.card {
padding: 1rem;
.title {
font-size: 1.2rem;
}
&:hover {
box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
}
}子要素とホバー状態を1つのブロックにまとめて記述
.button {
background: #2563eb;
@media (width >= 768px) {
padding: 12px 24px;
}
}メディアクエリもセレクタの中にネストできる
/* & を前置すると「親自身が条件を満たす場合」 */
.input {
border: 1px solid #ccc;
.dark & {
border-color: #555;
}
}&の位置を変えて「.darkの中の.input」を表現
擬似クラスや複合セレクタ（&:hover、&.active）には&が必須です。要素セレクタの子（.card { p { ... } }）は&なしで書けます。ネストは2〜3階層までに抑えると詳細度の事故を防げます。
ネストしたセレクタの詳細度は:is()と同じ計算になるため、Sassの単純結合とは異なる場合があります。また「& div」と「&div」は意味が違います（後者は無効になりがち）。深いネストは可読性と詳細度を悪化させます。
AIはSassの記法（@mixin、$variable、&-suffix による命名結合）とネイティブネスティングを混同しがちです。特に「&-item」のようなセレクタ名の文字列結合はネイティブCSSでは動きません。また2023年の初期実装にあった「ネスト側は&か記号で始める必要がある」制約を今も適用した冗長なコードを書くことがありますが、現在は要素セレクタも直接ネストできます。
このSCSSファイルをビルドツールなしで動くネイティブCSSネスティングに書き直して。&-fooのような文字列結合は使えない点に注意して
このフラットなCSSをネイティブネスティングで整理して。ネストは2階層まで、詳細度が変わらないように
CSSネスティングで書いたこのコードが古いブラウザでどう振る舞うか、フォールバックが必要か評価して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。