DEV Community

Mika Caldera
Mika Caldera

Posted on

Style parent element if child a specific class

How do I use sass style a parent element different if a child of a specific class is present?

Basic HTML format

<div class="parent>
    <div class="one">child</div>
    <div class="two">child</div>
    <di  class="three">child</div>
</div>
<div class="parent>
    <div class="one">child</div>
    <div class="two">child</div>
    <div  class="four">child</div>
</div>  

Basic SCSS Format

.parent {
    padding-bottom: 20rem;
    .child {
        color: red;
    }
}

IF the parent has child with the class four I would like the parent to have no padding.

Is there a way to achieve this with SASS?

Discussion (2)

Collapse
dry profile image
Hayden Mankin

As far as I know there is no way to do this with SCSS, as there is no way to do it with CSS that it will compile to.

There is a draft for this feature, so we may see it in the future.

You can, however, achieve this using JQuery

$(".four").parent(".parent").css("padding", "0px");
Collapse
mikacaldera profile image
Mika Caldera Author • Edited on

Thanks so much!
For both the link to the upcoming feature and the alternate solution.

I'll give the alternate js solution a try.

Update:
I gave it a try. Only edit was to change parent to parents. It didn't seem to work otherwise.

// Removes padding when portal is present
   $('.portal-group').parents('.cover').css('padding-bottom', '0px');