nested css rules

Question

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?

Answer 1

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

Maybe that was it?

Answer 2

That is not valid standard CSS, but it's an example of nesting class declarations using 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;
}

Answer 3

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.

Answer 4

Thanks for the answers, which all pointed in the right direction. Since I'm working with ASP.NET it was probably .less (less css for .net) where I saw that approach.

The main site of that project seems to be down, but the project is hosted on github.