Choose an element for styling only if it contains a child element with a particular class

Question

Looking to adjust padding based on specific child class

<div class="container page-content">

</div>

The page-content class typically includes padding:

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

However, there is a special case where an "item-pagehome" class is present inside the div:

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

In this scenario, I want to disable the padding-top from .page-content. But how can I achieve this?

I attempted to select it using:

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

Unfortunately, this approach did not work...

Is there a way to target a div only when it contains a specific child class, like .item-pagehome in this situation?

Answer 1

Answer №1

.wrapper.content .item-pagefeatured {
    padding-top: -130px;
}

Answer 2

.wrapper.content .item-pagefeatured {
    padding-top: -130px;
}

Answer 3

Unfortunately, CSS is not capable of achieving this task.

CSS stands for Cascading Style Sheet and works in a cascading manner from top to bottom. It can only style the last element targeted by the selector.

The desired condition can be accomplished with JavaScript, although it falls beyond the scope of your original inquiry.

Answer 4

Unfortunately, CSS is not capable of achieving this task.

CSS stands for Cascading Style Sheet and works in a cascading manner from top to bottom. It can only style the last element targeted by the selector.

The desired condition can be accomplished with JavaScript, although it falls beyond the scope of your original inquiry.