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

Question

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;
  }
}

Answer 1

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.