Apply style if element exists

Question

I need to use CSS to apply style to class article ONLY if class subject is present inside .container

<div class="container">
    <div class="subject">
       ...
    </div>
    <div class="article">
       ...
    </div>    
</div>

I was trying to use sibling selector, but it does not seem to work. What am I missing?

.container + .subject .article { ... }

Answer 1

The adjacent sibling combinator is meant for sibling elements. Your selector wasn't working because .container and .subject are not siblings, .subject is a child of .container.

.container .subject + .article

The elements .subject and .article are siblings, therefore it should work.

Example Here

Answer 2

You can use the sibling selector:

.container .subject + .article { // Your CSS rules

The rule you have now grabs the .container, checks for the sibling .subject, and then grabs the child .article, so it's just in the wrong order.