CSS 疑似要素セレクターのアンパサンド (&) をわかりやすく理解する

CSS でこのようなコードに遭遇したとき、アンパサンド (& の意味について疑問に思うのは自然なことです) ) 文字:

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

ただし、この構文は CSS の一部ではないことに注意することが重要です。代わりに、これは LESS と呼ばれる CSS プリプロセッサに属します。

LESS を使用すると、アンパサンド文字を使用してセレクター修飾子をネストできます。これにより、繰り返しを避けて、簡潔で読みやすいコードを作成できます。例:

.clearfix { 
  &:before {
    content: '';
  }
}

これは次のようにコンパイルされます:

.clearfix:before {
  content: '';
}

アンパサンドにより、ネストされたセレクターが .clearfix:before にコンパイルされるようになります。これがないと、.clearfix :before にコンパイルされ、無効な CSS セレクターが生成されます。

あなたが提供した Twitter Bootstrap の例では、アンパサンドは疑似要素 (::before) にスタイルを適用するために使用されています。および ::after) は、.clearfix 要素の子として作成されます。これにより、これらの疑似要素を簡潔に定義し、CSS 内でモジュール構造を維持できるようになります。