Select an element only when it has a child with a specific class [duplicate]

Question

I have this markup:

<div class="container page-content">

</div>

normally the class page-content has a padding:

.container.page-content{
    padding-top: 160px;
}

But at a specific page there is a class "item-pagehome" inside my div:

<div class="container page-content">
   <div class="item-pagehome">
     Some Content ... 
   </div>
</div>

And in this special case I want to disable the padding-top of the .page-content. But how can I do this?

I try to select:

.page-content:has(> .item-pagehome){
   padding-top: 0px;
}

But this does not working ...

How can I select a div only when it is a specific child class, in this case .item-pagehome?

Answer 1

.container.page-content .item-pagehome {
    margin-top: -160px;
}

Answer 2

It cannot be done using CSS.

CSS is Cascading Style Sheet (cascading: from top to bottom). You can only effect the last element in the CSS selector.

The condition you are looking for can be done using JavaScript, but this is outside the scope of your question.