What Does The & Mean in an SCSS Selector

What does the & mean in an scss selector?

The & is a placeholder for the parent selector:

.parent {
  & > ul {
    color: red
  }
}

Is the same like

.parent > ul {
  color: red
}

A common use case are pseudo classes, e.g.:

.link {
  &:hover {
    color: red
  }
}

A nice explanation with examples can be found on CSS Tricks.

What does '&.' in '&.sub-title' indicates in scss?

The & concatenates the parent class, resulting in .title.sub-title (rather than .title .sub-title if the & is omitted).

The result is that with the & it matches an element with both title and sub-title classes:

<div class='title sub-title'></div> <!-- << match -->

whilst without the & it would match a descendent with class sub-title of an element with class title:

<div class='title'>
  ...
    <div class='sub-title'></div> <!-- << match -->
  ...
</div>

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

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

What does an & before a pseudo element in CSS mean?

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.

In MUI, what does '& *' mean?

The sign & related to css compiler, like scss.
The * means all, as the sign > means direct child.

Basically, it will refer to the element you are in his scopes, this case:

// element card
card: {
        maxWidth: '475px',

        // all direct children of the element card
        '& > *': {
            flexGrow: 1,
            flexBasis: '50%'
        },
}

Meaning of SASS (SCSS) plus sign and ampersand syntax ( + & ) to the right of a selector?

I found an online SASS compiler and plugged this code in and got.

.feature-title + .listing-feature__summary {
  color: #f00;
}

This ends up being a sibling selector.

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

What is the rationale for using & selector in CSS?

&.className or &:pseudo-class is basically an SCSS syntax of writing selectors which aims at choosing multiple scenarios in a className attribute . E.g. in your code .menu class will also have another class called .open class to it in <html> structure so this means you are selecting an element where the classname is both .menu and .open which is a way of writing nested code in SASS-SCSS, a CSS pre-processor. a typical file saved with .CSS extension may not be able to read this syntax and hence throw an error. Hope this answer helps. All the Best!

What does the '&' selector select?

I believe the ampersand is a Sass feature. From the docs:

Referencing Parent Selectors: &

Sometimes it’s useful to use a nested rule’s parent selector in other
ways than the default. For instance, you might want to have special
styles for when that selector is hovered over or for when the body
element has a certain class. In these cases, you can explicitly
specify where the parent selector should be inserted using the &
character.

What Does The & Mean in an SCSS Selector