Newly available YES。Baseline Widely available。ビルドツール不要でそのまま使える。

CSS Nesting

CSS の & 入れ子セレクターは、CSS 入れ子を使用する場合に、親子ルールの関係を明示的に示します。このセレクターは、入れ子になっている子ルールのセレクターを親要素に対して相対的なものにします。入れ子セレクター & がない場合、子ルールセレクターは子要素を選択します。子ルールセレクターは、詳細度の重みが :is() 内にあるのと同じになります。

メモ: 子ルールは子要素セレクターという意味ではありません。子ルールは & 入れ子セレクターを使用することによって、親要素を対象とすることも子要素を対象とすることもできます。

入れ子スタイルルールで使用しない場合、 & 入れ子セレクターはスコープルートを表します。

構文設計

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`:nesting`	120	120	117	17.2	120	17.2
DOM API
`CSSNestedDeclarations` CSSNestedDeclarations は CSS ルール API のインターフェイスで、入れ子になった CSSRule をグループ化するために使用されます。	130	130	132	18.2	130	18.2
`style` style は CSSNestedDeclarations インターフェイスの読み取り専用プロパティで、入れ子になったルールに関連付けられたスタイルを表します。	130	130	132	18.2	130	18.2
`cssRules` cssRules は CSSGroupingRule インターフェイスのプロパティで、 CSSRuleList 型で CSSRule オブジェクトのコレクションを返します。	112	112	117	16.5	112	16.5
`deleteRule` deleteRule() は CSSGroupingRule インターフェイスのメソッドで、子 CSS ルールの一覧からある CSS ルールを取り除きます。	112	112	117	16.5	112	16.5
`insertRule` insertRule() は CSSGroupingRule インターフェイスのメソッドで、新しい CSS ルールを CSS ルールのリストへ追加します。	112	112	117	16.5	112	16.5

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS

.card {
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;

  & .title {
    font-size: 1.25rem;
    font-weight: bold;
  }

  & .body {
    color: #4b5563;
    line-height: 1.6;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  @media (width >= 768px) {
    display: grid;
    grid-template-columns: auto 1fr;
  }
}

ライブデモ

nestedselekta-

CSS Nesting nestedselekta- demo.

プレビュー全画面表示

&:hover class

CSS Nesting &:hover class demo.

プレビュー全画面表示

nestedmedeiakeri

CSS Nesting nestedmedeiakeri demo.

プレビュー全画面表示

実務での使いどころ

コンポーネントスコープのスタイル

コンポーネントのスタイルをネストでグループ化し、関連するルールを一箇所にまとめる。保守性が向上。
ビルドツール不要のネスト

Sass・PostCSS なしでネスト記法を使用。開発環境のセットアップが簡素化される。

注意点

ネストが深くなりすぎると可読性が低下する。3〜4階層以内に抑える。
初期仕様では要素セレクターの直接ネストに & が必要だったが、最新仕様では省略可能なケースが増えている。

対応ブラウザ

基本構文

ライブデモ

nestedselekta-

&:hover class

nestedmedeiakeri

実務での使いどころ

コンポーネントスコープのスタイル

ビルドツール不要のネスト

注意点

アクセシビリティ

参考リンク