Nested CSS Selectors in CSS

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.

Spudley · Accepted Answer · 2011-05-16 14:10:43Z

4

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

edited May 16, 2011 at 14:10

answered May 13, 2011 at 16:26

Spudley

169k39 gold badges240 silver badges309 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MindWire Over a year ago

Thanks for the push in the right direction. Both libraries look great, and have been doing lots of reading on which to roll with. SASS is winning as of now, mainly due to its integration with Compass and wider adoption overall. If you ask me though, I think that the components of SASS should be the default implementation of CSS to begin with.

Spudley Over a year ago

@MindWire - as I said, Google is pushing to have some of these features standardised into CSS, and with their current speed of development I'd say you should expect to see some of it appearing in Chrome within a year. But it'll be a long time before it's in enough browsers to be considered usable. I'll edit the answer to link to a relevant article.

Cheeso Over a year ago

See the relevant section of the proposed CSS3 draft: dev.w3.org/csswg/css3-hierarchies This is not part of CSS; it is currently a proposal.

Dustin Laine · Accepted Answer · 2011-05-13 16:21:24Z

1

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

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

answered May 13, 2011 at 16:21

Dustin Laine

38.7k10 gold badges90 silver badges125 bronze badges

Collectives™ on Stack Overflow

Nested CSS Selectors in CSS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related