What does `&#my-id` mean in CSS or SASS?

115
August 11, 2018, at 12:20 PM

I inherited some CSS code, which is making use of the & character prior to the id name to style it. It looks something like this:

&#my-id {
  // Content and attributes
}

There are also other instances of it, such as:

&:before {
  // content and attributes
}

and

&:hover {
      // content and attributes
    }

What do those mean? I can't find a good way to express this in a search, so I can't find anything. My apologies if this is a duplicate.

Answer 1

It refers to the parent selector.

Input:

.parent {
    &.child {
        color: red;
    }
}

Output:

.parent.child { color: red }

It's really helpful if you're writing CSS in BEM format, something like:

.block {
    &__element {
        width: 100px;
        height: 100px;
        &--modifier {
             width: 200px;
        }
    }
}
.block__element { width: 100px; height: 100px;}
.block__element--modifier { width: 200px;}
<div class="block__element"></div>
<div class="block__element block__element--modifier"></div>

And finally, all examples I've shared have been concatenating the class names, but you can also use it as a reference, like:

.parent {
    & .child {
         color: red;
    }
}
.parent {
    .child & {
         color: blue;
    }
}

.parent .child { color: red }
.child .parent { color: blue }

Additional references:

http://lesscss.org/features/#parent-selectors-feature

https://blog.slaks.net/2013-09-29/less-css-secrets-of-the-ampersand/

Using the ampersand (SASS parent selector) inside nested selectors

Answer 2

It's a built-in feature of Sass: https://css-tricks.com/the-sass-ampersand/

You can use it when you're nesting selectors and you need a more specific selector, like an element that has both of two classes:

If your CSS looks like this:

.some-class.another-class { }

And you wanted to nest, the Sass equivalent is:

.some-class {
     &.another-class {}
}
READ ALSO
How to create grid layout where all unknown number of rows have equal height but not the last row?

How to create grid layout where all unknown number of rows have equal height but not the last row?

I am creating a form with the unknown number of rows but the last row should be fixed height which contains form action button now how to write this in the grid system

124
Extra space character appearing when I use &#39;&#231;&#39; via content on CSS

Extra space character appearing when I use 'ç' via content on CSS

I am inserting some content through the content property in my CSS fileWhen I have the รง character, I get an extra space

132
Costumize reactjs antd ant-carousel bullets - Any suggestions?

Costumize reactjs antd ant-carousel bullets - Any suggestions?

I'm developing a reactjs project by ant-design (antd) libraryI want to use Carousel component in my project

159
SCSS and invalid property with &ldquo;yiq&rdquo;

SCSS and invalid property with “yiq”

I'm building a website with bootstrap 4 and a bootstrap theme called shardsI've replaced the necessary SCSS files and compiled them with my gulpfile

204