Question

Is there a way to create a css group inside of a css selector.

Eg:

.SectionHeader
{
    include: .foo;
    include: .bar;
    include: .baz .theta .gamma .alpha .omega .pi .phi;
}

Trying to see if there is a way to do this at the CSS level instead of inside of a class=”.foo .bar .baz .theta .gamma .alpha .omega .pi .phi” tag. I have to use the combination of classes in a few places and want to avoid all that cut and paste.

Answer 1

No, you can’t do this in pure CSS as things stand.

There are some moves afoot to extend CSS to allow things like this, but it’s very early days Google has some demonstrated some extended syntax working in a dev version of Chrome, but it’ll be a while before it goes live, and even longer before it has sufficient cross-browser support to be actually useful.

In the meanwhile though, there are a number of CSS extension products available which allow you to write stylesheets with nested rules, etc. You would then need to run your stylesheets through a parser to convert them into “real” CSS before you put them on your site, but it might be a compromise you’re prepared to make.

If so, check out SASS and Less, among others.

[EDIT]
By the way, I mentioned that Google have been demonstrating some extended CSS syntax. Here’s a link to a blog post about it: http://www.xanthir.com/blog/b49w0