CODEWITHSUNDEEP
css
santa
santa

Reputation: 12512

Apply style if element exists

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 { ... }

Upvotes: 4

Views: 3596

Answers (2)

Igor
Igor

Reputation: 34001

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.

Upvotes: 3

Josh Crozier
Josh Crozier

Reputation: 241098

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

Upvotes: 6

Related Questions