Question

Say you have this code:

<div class="hello">
    <div class="cat dog"/>
</div>
<div class="notASibling" />

is it possible to set a property of notASibling, based on the class value of an element that is not a sibling? For example, in the above code I may want to set the display property of notASibling to hidden if the hello > cat class is not a dog.

If notASibling was a sibling of “cat dog”, I could simply say:

.cat:not(.dog) ~ .notASibling{ display:none; }

Answer 1

You can’t reach a non-sibling in pure CSS. You can do this in JavaScript. If you want a pure CSS solution, consider refactoring your DOM a bit. Maybe something like this:

<div class='dog'>
    <div class='hello'>
        <div />
    </div>
    <div class='notASibling' />
</div>


.cat div.notASibling {
    /* special styles for cats */
}
.dog div.notASibling {
    /* special styles for dogs */
}