csstwitter-bootstrapsassless

What does an "&" before a pseudo element in CSS mean?

In the following CSS taken from Twitter Bootstrap what does the ampersand (&) character mean?

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

  • That's LESS, not CSS.

    This syntax allows you to nest selector modifiers.

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

    Will compile to:

    .clearfix:before {
  content: '';
}

    With the &, the nested selectors compile to .clearfix:before.
    Without it, they compile to .clearfix :before.