0

I have an element which has a child element.

<div class="parent">
<div class="child">
</div>
</div>

So here is the styling for parent element:

.parent {
padding: 20px;
}

So child component displays whenever the error is triggered. So, what I am trying to do when there is an error (the child div is going to be triggered and will be displayed) I want parent's padding 0 and I want to add it to the child's bottom.

So it should be basically something like this:

.parent {
padding-bottom: 0;
.child {
padding-bottom:20px;
}
}

But whenever I have a child. Is it possible to achieve this via css? How can I achieve this?

World's famous people
  • 147
  • 10
  • 3
    you cannot have a css selector that will set the style of a parent element having further conditions like a child. Unless using [:has](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) but that's a very very recent feature mostly unsupported. You would need to use js to achieve something like that. – Diego D Sep 15 '22 at 10:13
  • @diegod is right. I would add that you probably don't need it. In your basic case, you could have `.child:last-child {paddin-bottom: 0;}` – Amaury Hanser Sep 15 '22 at 10:22
  • 1
    Does this answer your question? [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – Amaury Hanser Sep 15 '22 at 10:22

0 Answers0