nested css rules [duplicate]

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

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; } 

Answer 2

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.