how to change padding if the element has a child

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?