CSS unknown number of intermediate elements

Question

I have a DOM tree which looks something like this (formulated as a regex):

div.container (div.notbox | div.box)+

Now I need so select all "first-level" .box children. Lets assume following document:

<div class="container">
    <div>
        <div class="box" id="1">
            <div class="box" id="2"></div>
        </div>
    </div>
    <div class="box" id="3"></div>
</div>

In this case I would need to select #1 and #3, but not #2. Is there a way to formulate that with a CSS query? Something like

.container > :not(.box) > .box

but repeat the :not(.box) clause an indefinite amount of times?

PS: if someone knows a better name for the question; I'm open for suggestions — jvataman, Jul 27 '15 at 18:39
Trying to understand your goal: are you trying to select all .box elements which are not themselves a child of a .box? — Daniel Beck, Jul 27 '15 at 18:49
Yeah, as nikhil points out this is one of those things that is Harder Than It Should Be. Depending on the styling I might just do `.box {/* do stuff */}` and `.box .box {/* undo that stuff */}` — Daniel Beck, Jul 27 '15 at 18:57
A bit of recursive jQuery could probably do the trick. I'm not sure what you want to do is possible without javascript though. — Kwarrtz, Jul 28 '15 at 01:27
I think you should just update your markup in order to make it (a lot) easier to target with your css. You're using same class for 3 different levels and CSS isn't powerful enough to satisfy what you want to do. — Sebastien, Sep 23 '15 at 13:26

score 0 · Answer 1 · answered Sep 26 '15 at 09:43

Perhaps this way:

.box {/* styles */}
.box .box {/* styles */}

Anyway I'd suddgest you to create different classes:

<div class="container">
<div>
    <div class="box" id="1">
        <div class="childBox" id="2"></div>
    </div>
</div>
<div class="box" id="3"></div>

Or if same styles needed plus a childBox styles :

<div class="container">
<div>
    <div class="box" id="1">
        <div class="box childBox" id="2"></div>
    </div>
</div>
<div class="box" id="3"></div>

CSS unknown number of intermediate elements

1 Answers1