Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;   } } 
like image 291
neodymium Avatar asked Nov 28 '12 15:11

neodymium


People also ask

What does a an means?

a/an = indefinite article. For example, if I say, "Let's read the book," I mean a specific book. If I say, "Let's read a book," I mean any book rather than a specific book.

What does a N stand for on Wattpad?

A/N means "Author's Note." A/N is an abbreviation used in fanfiction to introduce a note by the author. As well as in fanfiction, an author's note can appear in professionally written and published books, both fiction and nonfiction, but the term would not usually be abbreviated.

What does AB mean in text?

Ass Backwards -or- Ah Bless Online jargon, also known as text message shorthand, used primarily in texting, online chat, instant messaging, email, blogs, and newsgroup postings, as in "Well that's AB."


2 Answers

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.

like image 77
SLaks Avatar answered Sep 22 '22 08:09

SLaks


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 {  } 
like image 40
anthonygore Avatar answered Sep 25 '22 08:09

anthonygore