Wrapping ID's in CSS Classes?

Question

I am relatively new to CSS and wondering whether its possible to "Wrap" ID's so you don't have to repeat them over and over ?

i.e.

#home
{
some stuff
}

#home .header {
some stuff
}

#home .sub_header {
some stuff
}

Is it possible to "wrap" the .header and .sub_header so I don't have to keep repeating #home all the time ? i.e. something like this so the ID can collectively wrap the classes?

#home
{
some stuff
}

@#home [

.header {
some stuff
}

.sub_header {
some stuff
}
]

Answer 1

Excellent question! This is not possible with native CSS I'm afraid. There are no real short cuts to take.

If you work with a lot of CSS, there are pre-compilers that allow you to use enhanced notation, and convert it into CSS on the fly.

There's for example

• xCSS it can nest child elements.

• Then there's LESS, it's written in Ruby so you need that installed (as far as I understand, I haven't used it myself yet) but it's perfectly suitable for editing CSS in any environment. Check the "nested rules" section on the front page.

If you are just getting started with CSS, you may want to stick with the native notation first, though. But the moment it gets really tedious, those tools are a great help.