0

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
  {
    margin-top:0;
    margin-left:0;
    top:83px;
  }
 }

What is the purpose of the & here ?

runtimeZero
  • 26,466
  • 27
  • 73
  • 126
  • 5
    That looks like a preprocessor stylesheet to me, not vanilla CSS. Are you sure the file you are looking at has the extension .css? – BoltClock Mar 21 '14 at 17:15
  • 2
    it's probably the parent selector reference in SASS. http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector. Anyway there's a syntax error in `height" auto;` so if you compile this code with generate a SASS error. – Fabrizio Calderan Mar 21 '14 at 17:17
  • Possible duplicate of [What does an “&” before a pseudo element in CSS mean?](http://stackoverflow.com/q/13608855/1529630) – Oriol Jan 25 '16 at 20:40

2 Answers2

3

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.

ЯegDwight
  • 24,821
  • 10
  • 45
  • 52
technoY2K
  • 2,442
  • 1
  • 24
  • 38
2

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;
}
Felix
  • 37,892
  • 8
  • 43
  • 55