CSSネストセレクタ（&）

定義と使用方法

CSSネスト（&) セレクタは、他の要素の文脈内で要素にスタイルを適用するために使用されます。

ネストは、関連する要素に対して複数のセレクタを繰り返し指定する必要を減少させます。

インスタンス

例1

ネスト前には、各セレクタを明示的に別々に宣言する必要があります。以下のようになります：

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
}
.box > a {
  color: green;
}
.box > a:hover {
  color: white;
  background-color: salmon;
}

自分で試してみてください

例2

ネスト後、セレクタは継続され、関連するスタイルルールは親ルール内にグループ化されます：

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
  & > a {
    color: green;
    &:hover {
      color: white;
      background-color: salmon;
    }
  }
}

自分で試してみてください

ヒント：上記の例の .box スタイルをプロジェクトから削除する場合、関連するセレクタを検索する必要なく、整个のグループを削除できます。

CSS文法

parentrule {
  css宣言;
  & childrule {
    css宣言;  } 
}

技術的詳細

ブラウザのサポート