CSS multi level parent selectors

Question

I want to select the first level .box of each one of these three .box siblings, but not their children .box(s). (Does this make sense?)

Here's my markup:

<div class="box">
    <div class="box">
        test
    </div>
</div>

<div class="box">
    <div class="box">
        test2
    </div>
</div>

<div class="box">
    <div class="box">
        test3
    </div>
</div>

How can I perform this selection with CSS?

Jon · Accepted Answer · 2012-10-03 18:41:16Z

6

This is not possible unless you specifically refer to the parent of the outer boxes somehow. For example, if you know that all of this is going to be inside #foo, then #foo > .box will do the job.

However, you can select boxes which are in another box with .box > .box or .box .box, so in this manner it might be possible to do what you need using the classic workaround of "undoing changes". For example, to turn only the outer boxes blue:

.box { background: blue } /* make a far-reaching change */
.box .box { background: transparent } /* then undo it partially */

Of course the inner boxes will still show the blue background of their parents, but you get the idea.

answered Oct 3, 2012 at 18:41

Jon

439k85 gold badges756 silver badges820 bronze badges

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

3 Comments

Jon McIntosh Over a year ago

Well if that's the only way, that's the only way. Thanks so much for your help!

KatieK Over a year ago

Specifying the parent - as in the #foo > .box example - is a powerful and elegant way to do this. The desired .box elements must have a parent, even if it's <body>.

Jon McIntosh Over a year ago

This was in the event that I could not edit the existing markup. I'd also like to add to the answer saying if you are using jQuery as a selector you can use :not to preform this selection: .box:not(.box > .box)

Sebass van Boxel · Accepted Answer · 2012-10-03 20:58:43Z

2

The better way to select just the first ones is to use the > in your css selector so use it like this:

body>.box {
    css here
}

edited Oct 3, 2012 at 20:58

Sebass van Boxel

2,6221 gold badge24 silver badges37 bronze badges

answered Oct 3, 2012 at 19:44

Fernando Javier Santamarina Ca

1114 bronze badges

Collectives™ on Stack Overflow

CSS multi level parent selectors

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