40

Some time ago I saw an example of a css file, where the css rules/selectors where specified in a nested way, e.g. something like this:

div.a {
  color: red;
  div.b {
    font-weight: bold;
  }
}

I'm not sure where I saw that (probably in a SO question), or whether it was exactly as shown above.

My questions: Is the above CSS correct/valid? Is it a standard way to specify CSS rules or is this a browser-dependent hack?

M4N
  • 94,805
  • 45
  • 217
  • 260

4 Answers4

48

That is not valid standard CSS, but it's an example of nesting class declarations using Sass/SCSS or LESS and I believe other CSS extensions out there, which expand it to something like this (which is valid CSS), before serving it to the browser to use:

div.a {
  color: red;
}

div.a div.b {
  /* Inherits color from div.a */
  font-weight: bold;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
5

What you are probably referring to is LESS.

The example, you gave is not valid CSS, but is valid with LESS. LESS will "compile" the nested CSS and convert it to something which is valid CSS.

HoLyVieR
  • 10,985
  • 5
  • 42
  • 67
2

You can nest rules with SASS, http://sass-lang.com/

Maybe that was it?

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
  • It should be noted that the output from SASS is still CSS compliant, without nesting. SASS nesting just makes it easier to write. – Robert Sep 15 '10 at 19:03
0

Seems there is a proposal over at https://tabatkins.github.io/specs/css-nesting/

but I can't find the status of it

balupton
  • 47,113
  • 32
  • 131
  • 182
  • now (February 2023) it is a working draft: https://www.w3.org/TR/css-nesting-1/; "can i use" says chrome will support it on the next version (112): https://caniuse.com/css-nesting – Tilt Mar 30 '23 at 13:06