Conditionally apply a css rule based on immediately adjacent sibling's children

Question

Let's say I have some HTML set up like this:

<div class="older-sibling">
    <div class="first-child">
        <div class="first-grandchild"></div>
    </div>
    <div class="second-child">
        <div class="second-grandchild"></div>
    </div>
    <div class="third-child">
        <div class="third-grandchild"></div>
    </div>
</div>

<div class="younger-sibling"></div>

The divs .first-child and .third-child will always be present. The div .second-child, however, may not be. When the .second-child div of the .older-sibling is not present, I can target the css rules of the .third-grandchild div by checking to see if its parent is the adjacent sibling of the .first-child, like so:

.first-child + .third-child > .third-grandchild {
    rule: foo;
}

In those cases where the .second-child is not present, I also want to apply some conditional css targeted at the .younger-sibling div. How can I achieve this using CSS and without having to incorporate jQuery?

How does .second-child become absent? Was it present at load, or it never was there but will be there in the future? — zer00ne, Jul 28 '15 at 01:54
you don't have to use jQuery for something like this, you can very well use native JS, but a better question is: why css only? — Daemedeor, Jul 28 '15 at 01:57
I'd like to do it with CSS rather than with JS to reduce the overhead. .second-child is absent on load, but I want it to behave the same way even if the element is manually deleted using developer tools (another reason to do it purely in CSS). — Elaine B, Jul 28 '15 at 02:05
You can't do this with CSS, because there's no way to traverse back up the DOM once you've determined that `second-child` is not present.. You need JavaScript. — TylerH, Jul 28 '15 at 02:07
The only thing I can think of that's close to a conditional in CSS is some pseudo-selectors, but that's pretty weak. — zer00ne, Jul 28 '15 at 02:11
possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — TylerH, Jul 28 '15 at 02:18
"even if the element is manually deleted using dev tools", that should never be a concern in most environments (maybe in some hacker conference or just local testing). the people who regularly do it would be devs and should understand the consequences of messing around with the dom and understand styles will break. — Daemedeor, Jul 28 '15 at 02:42
@TylerH is right - the jQuery way to do this would either be `.older-sibling:has(> .first-child + .third-child) + .younger-sibling` or `.older-sibling:not(:has(> .second-child)) + .younger-sibling`, neither of which is possible with CSS. — BoltClock, Jul 28 '15 at 03:49

Wes Foster · Answer 1 · 2015-07-28T04:09:09.220

If you move younger-sibling into the older-sibling div, you would be able to match it using pure CSS. When the second child is not present, the following CSS selector should match (although, technically it wouldn't be a sibling anymore):

.older-sibling div:nth-child(3).younger-sibling { background: red; }

<div class="older-sibling">
    <div class="first-child">
        <div class="first-grandchild">First child</div>
    </div>
    <!-- second child is missing -->
    <div class="third-child">
        <div class="third-grandchild">Third child</div>
    </div>

    <div class="younger-sibling">Younger</div>
</div>

This will only match when third-child is the second child of its parent, which will only happen when second-child is not there.

Conditionally apply a css rule based on immediately adjacent sibling's children

1 Answers1