What does & do in css

Question

I am looking at some legacy code and found something like below in the css file:

.user_modal {
  width: auto;
  height\" auto;
  &.modal,
  &.fade.in
  {         


        

Answer 1

You're probably experienced with SASS selector. The ampersand & in sass is used to refer to the parent selector. So in your case & will refer to parent selector which is .user_modal

So &.modal which will be converted to CSS and become .user_modal.modal

so it'll match:

<div class='user_modal modal'></div>

the same way for &.fade.in which will match

<div class='user_modal fade in'></div>

So finally it's just become normal CSS after you've converted it:

.user_modal.modal , .user_modal.fade.in {
    margin-top:0;
    margin-left:0;
    top:83px;
}

Answer 2

It looks like Sass or LESS. It's user_modal with those other classes in it that are not children of it. The & is a reference to the element/class above it.