What Does the Ampersand (&) Do in LESS CSS Pseudo-Element Selectors?

Demystifying the Ampersand (&) in CSS Pseudo-Element Selectors

When encountering code like this in CSS, it's natural to wonder about the significance of the ampersand (&) character:

<code class="css">.clearfix {
  *zoom: 1;
  &amp;:before,
  &amp;:after {
    display: table;
    content: "";
  }
  &amp;:after {
    clear: both;
  }
}</code>

However, it's important to note that this syntax is not part of CSS. Instead, it belongs to a CSS preprocessor called LESS.

LESS allows you to nest selector modifiers using the ampersand character. This enables you to write concise and readable code by avoiding repetition. For instance:

<code class="less">.clearfix { 
  &amp;:before {
    content: '';
  }
}</code>

This will compile to:

<code class="css">.clearfix:before {
  content: '';
}</code>

The ampersand ensures that the nested selectors compile to .clearfix:before. Without it, they would compile to .clearfix :before, which would result in an invalid CSS selector.

In the Twitter Bootstrap example you provided, the ampersand is used to apply styles to pseudo-elements (::before and ::after) that are created as children of the .clearfix element. This allows you to define these pseudo-elements concisely and maintain a modular structure within your CSS.

The above is the detailed content of What Does the Ampersand (&) Do in LESS CSS Pseudo-Element Selectors?. For more information, please follow other related articles on the PHP Chinese website!