CODEWITHSUNDEEP
csstwitter-bootstrapsassless
neodymium
neodymium

Reputation: 3946

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

Upvotes: 128

Views: 270519

Answers (6)

Ric Paton
Ric Paton

Reputation: 81

Found this on Google, needs a little update as CSS nesting is now native, rather than just the preserve of SASS (and other CSS processors).

You can find details about this here: W3C - CSS Nesting Module Working Draft, 14 February 2023, while some examples can be seen here: MDN - Using CSS nesting.

Both Chrome and Firefox support CSS Nesting. You can find the full browser support information here: CanIUse? '&' CSS Nesting

It must be noted, though, there are some differences between the SASS and native implementation that won't allow you to just rename .sass to .css and hope things render correctly.

(FAO MODS: I appreciate this isn't specifically a bootstrap answer, but it adds an up to date context. Hopefully that's OK)

Upvotes: 8

Aris
Aris

Reputation: 5055

The parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector.

A way to think about it, is that whenever an '&' is encountered in scss, it will be replaced by the parent selector when build in css.

An excellent example from sass documentation is this.

This sass code:

.alert {
  // The parent selector can be used to add pseudo-classes to the outer
  // selector.
  &:hover {
    font-weight: bold;
  }

  // It can also be used to style the outer selector in a certain context, such
  // as a body set to use a right-to-left language.
  [dir=rtl] & {
    margin-left: 0;
    margin-right: 10px;
  }

  // You can even use it as an argument to pseudo-class selectors.
  :not(&) {
    opacity: 0.8;
  }
}

will compile to this css:

.alert:hover {
  font-weight: bold;
}
[dir=rtl] .alert {
  margin-left: 0;
  margin-right: 10px;
}
:not(.alert) {
  opacity: 0.8;
}

https://sass-lang.com/documentation/style-rules/parent-selector/

Upvotes: -1

Sudharshan S
Sudharshan S

Reputation: 99

'&' is useful feature in both Sass and Less preprocessor. For nesting it's used. It is time saver when we compare to CSS.

Upvotes: 3

SLaks
SLaks

Reputation: 887867

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.

Upvotes: 149

Ramesh kumar
Ramesh kumar

Reputation: 548

Here is an SCSS/LESS example:

a {
   text-decoration: underline; 
   @include padding(15px);
   display: inline-block;

     & img  {
                padding-left: 7px;
               margin-top: -4px;
             }
 }

and its equivalent in CSS:

a {
  text-decoration: underline; 
  @include padding(15px);
  display: inline-block;
}

a img  {
     padding-left: 7px;
     margin-top: -4px;
   }

Upvotes: 21

anthonygore
anthonygore

Reputation: 4977

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 {

}

Upvotes: 42

Related Questions