CODEWITHSUNDEEP
csscss-selectors
MindWire
MindWire

Reputation: 4089

Nested CSS Selectors in CSS

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.

Upvotes: 2

Views: 1012

Answers (2)

Spudley
Spudley

Reputation: 168655

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

Upvotes: 4

Dustin Laine
Dustin Laine

Reputation: 38503

No, but as you stated you can assign multiple classes to an element:

<div class="SectionHeader foo bar"></div>

Upvotes: 1

Related Questions