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)
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
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
parenttoparents. It didn't seem to work otherwise.