0

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?

Wai Yan Hein
  • 13,651
  • 35
  • 180
  • 372
  • Does [this](https://stackoverflow.com/questions/2326499/apply-css-styles-to-an-element-depending-on-its-child-elements) answer your question? – Jelmer Overeem Oct 22 '20 at 11:59

1 Answers1

2

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')
noshad b.e
  • 114
  • 11