CSS: Prevent parent element getting :active pseudoclass when child element is clicked

From the spec:

Selectors doesn’t define if the parent of an element that is ‘:active’ or ‘:hover’ is also in that state.

That means it’s implementation dependent. If an implementation chose to act this way (as current browsers obviously do), there’s nothing in the standard that can change that.

With CSS4, you might be able to do:

.parent:active:not(:has(:active)) {
   color: red;
}

but that is neither available nor finalized yet.