# CSSネスティング

> Sassなどのプリプロセッサなしで、セレクタを入れ子（ネスト）にして書けるネイティブCSS機能です。親子関係のスタイルをまとめて記述でき、&で親セレクタを参照します。ビルドツール不要でSass風の書き心地を実現します。

- カテゴリ: その他
- URL: https://www.css-dictionary.com/property/css-nesting/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/CSS_nesting

## 構文

```css
.parent { .child { ... } &:hover { ... } }
```

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 120+ / Firefox 117+ / Safari 17.2+ / Edge 120+

## コード例

### 例1: 子要素とホバー状態を1つのブロックにまとめて記述

```css
.card {
  padding: 1rem;

  .title {
    font-size: 1.2rem;
  }

  &:hover {
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
  }
}
```

### 例2: メディアクエリもセレクタの中にネストできる

```css
.button {
  background: #2563eb;

  @media (width >= 768px) {
    padding: 12px 24px;
  }
}
```

### 例3: &の位置を変えて「.darkの中の.input」を表現

```css
/* & を前置すると「親自身が条件を満たす場合」 */
.input {
  border: 1px solid #ccc;

  .dark & {
    border-color: #555;
  }
}
```

## TIPS

擬似クラスや複合セレクタ（&:hover、&.active）には&が必須です。要素セレクタの子（.card { p { ... } }）は&なしで書けます。ネストは2〜3階層までに抑えると詳細度の事故を防げます。

## よくある間違い

ネストしたセレクタの詳細度は:is()と同じ計算になるため、Sassの単純結合とは異なる場合があります。また「& div」と「&div」は意味が違います（後者は無効になりがち）。深いネストは可読性と詳細度を悪化させます。

## AIがよく間違えるポイント

AIはSassの記法（@mixin、$variable、&-suffix による命名結合）とネイティブネスティングを混同しがちです。特に「&-item」のようなセレクタ名の文字列結合はネイティブCSSでは動きません。また2023年の初期実装にあった「ネスト側は&か記号で始める必要がある」制約を今も適用した冗長なコードを書くことがありますが、現在は要素セレクタも直接ネストできます。

## AIへの依頼文例

- このSCSSファイルをビルドツールなしで動くネイティブCSSネスティングに書き直して。&-fooのような文字列結合は使えない点に注意して
- このフラットなCSSをネイティブネスティングで整理して。ネストは2階層まで、詳細度が変わらないように
- CSSネスティングで書いたこのコードが古いブラウザでどう振る舞うか、フォールバックが必要か評価して

## 関連プロパティ

- [css-custom-properties](https://www.css-dictionary.com/property/css-custom-properties.md)
- [media-queries](https://www.css-dictionary.com/property/media-queries.md)
- [pseudo-hover](https://www.css-dictionary.com/property/pseudo-hover.md)
- [at-scope](https://www.css-dictionary.com/property/at-scope.md)
- [cascade-layers](https://www.css-dictionary.com/property/cascade-layers.md)