Is it possible to select the child of my parent's sibling? [duplicate]

Question

This question already has answers here:

CSS - is there a cousin selector? (2 answers)

Closed 8 years ago.

Am I able to select .button based on a pseudo-class of .main?

I want div.button to be blue only if div.main is empty (.main:empty). How can I do this using only CSS?

<div class="container">
<div class="header">
    <div class="button">I should have color:blue when .main is empty</div>
</div>
<div class="content">
    <div class="main"></div>
</div>
</div>

(please don't offer to solve using jQuery)

Answer 1

No, there's no way to select a "cousin" with pure CSS.

If #header were after .content, then you could select .button from a pseudo-class of .content -- an "aunt/uncle" -- using the adjacent sibling combinator (+) like this:

.content:hover + #header .button{/* styles */}

But even then, you're not able to select .button from a pseudo-class of .main (the "cousin")