knitevision knitevision - 5 months ago 29
CSS Question

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

JSFiddle

When you click the

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

I tried
z-index
,
position: absolute & fixed
and no success.

Answer

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.