CSS Selector Grouping WITH Nesting

Question

For example I have a CSS class:

.class1 {background-color: red;}

But when this class is nested inside a defined (somewhat large) set of divs with ID in (#div1, #div2, #div3) I need some special styling..

Currently I'm accomplishing it like this:

#div1 .class1, #div2 .class1, #div3 .class1 {border: 1px solid;}

I would like to know if there is any way to not have to list out the class each time as the selector is getting very large due to the long selector. So in psudocode:

ANY(#div1, #div2, #div3) Sub Element .class1 {border : 1px solid;}

The example makes the question seem pretty moot but in reality has much more impact.

Thanks!

EDIT: I don't have total control of the HTML code as it will be coming from a 3rd party via Ajax. Also, I will need to support all major browsers including IE8.

I don't think there is anything like that in CSS. At least I've been frustrated by that myself many, many times... — Jan Krüger
– Jan Krüger, Commented Jun 12, 2013 at 13:23
you could add a span around it and it like this: #span1 .class1{ styling} — ErikMes
– ErikMes, Commented Jun 12, 2013 at 13:23
@ErikMes — No, you couldn't. Span elements can't contain div elements. — Quentin
– Quentin, Commented Jun 12, 2013 at 13:24

JAB · Accepted Answer · 2013-06-12 13:49:08Z

2

Why not assign a specific class to the divs in question? Then you could do it like this:

.classForDivs123 .class1 {border: 1px solid;}

I feel that would work best if the divs in question aren't arranged in a way that other selector patterns would match better (for example, CSS3 supports quite a few structural pseudo-class selectors that weren't previously available: http://www.w3.org/TR/selectors/#structural-pseudos, so if the divs with child class1 elements to be styled are in a predictable order/predictable locations amongst the children of their parent element(s), you could perhaps use :nth-child() or one of the related pseudo-classes to select the necessary divs).

Alternatively, you could look into using jQuery as below, but that would require runtime styling.

$("#div1, #div2, #div3").find(".class1").css("border", "1px solid");

edited Jun 12, 2013 at 13:49

answered Jun 12, 2013 at 13:33

JAB

21.2k6 gold badges73 silver badges80 bronze badges

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

3 Comments

Matt Klooster Over a year ago

Up-vote for good idea. But I forgot to mention the HTML is coming from a 3rd party via Ajax. I have to support back to IE8 so I doubt I 'll be able to use any bleeding edge CSS3 either :(.

JAB Over a year ago

@MattKlooster What Ajax framework are you using? If it's jQuery, you could go ahead and use my last suggestion, but even if not I'm sure other frameworks have similar ways of doing such filtering.

Matt Klooster Over a year ago

Personally I try to avoid styling with JS as much as possible. In this case I have it working with CSS I was just looking for a way to reduce my mark up.

rofavadeka · Accepted Answer · 2013-06-12 14:16:06Z

0

This might do the trick, but i don't think it's possible to specify the parent. You can use the not pseudo class. The any selector is an * by the way. For example:

.ajaxcontainer *:not(span, img, a, #div4, #div5) .class1{border : 1px solid;}

or

.ajaxcontainer div:not(#div4, #div5) .class1{...}

Hope this will work for you else JAB's jquery solution will do the trick.

answered Jun 12, 2013 at 14:16

rofavadeka

5876 silver badges19 bronze badges

1 Comment

Paolo Bergantino Over a year ago

Aside from the merits of going about it this way, IE8 does not support :not and he needs to support IE8.

Collectives™ on Stack Overflow

CSS Selector Grouping WITH Nesting

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related