CODEWITHSUNDEEP
csscss-selectors
Wai Yan Hein
Wai Yan Hein

Reputation: 14791

CSS selector - a class/ element that has an element with class

I am styling a website using CSS. In my project, I need to apply the style to a modal in a bit of a hacky way.

I have elements in the following order.

<div class="dialog">
<div class="dialog-content">
<div class="my-dialog-content">
 //I can change the my-dialog-content and the content within it.
</div>
</div>
</div>

In the markup above, the .dialog and .dialog-content come with the npm package so that I do not have control over it. Which means that I cannot add new classes to them. I am trying to override those classes/ elements but I am trying to override for just one dialog. If I override as follow,

.dialog {
   border: 1px solid red;
}

it will apply the style to all the dialogs/ modals in the entire project. I am looking for a selector the .dialog that has the children with .my-dialog-content within it. I tried using has, but it is not working. How can I do that?

Upvotes: 0

Views: 84

Answers (1)

noshad b.e
noshad b.e

Reputation: 124

you can't have it with css because in css you can select a child that has certain parent but you CAN Not Select a Parent based on it's child for that why you have to use javascript(or in this case hope you have jQuery): first add style:

.foo{
    border: 1px solid red;
}

then add this style to you element with jQuery:

$('.dialog').find('.my-dialog-content').parents('.dialog').addClass('foo')

Upvotes: 2

Related Questions