knitevision knitevision - 1 year ago 59
CSS Question

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


When you click the

, you see that
pseudoclass is triggered for the parent
. Is there a pure CSS (or some JS library) way of
pseudoclass not toggling on

I tried
position: absolute & fixed
and no success.

Answer Source

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.