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.

Answer 2

A nested & selects the parent element in both SASS and LESS. It's not just for pseudo elements, it can be used with any kind of selector.

e.g.

h1 {     &.class {      } } 

is equivalent to:

h1.class {  }