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

Question

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 1

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.

Answer 2

If you really want to solve this with CSS only:

If your button is active, add a :before-pseudo-element and with position: absolute; give the :before the same background as the parents.

button:active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #eee;
    z-index: -1;
}

Now all that is needed is that the parent is :

position: relative;
z-index: 0;

Have a look: http://jsfiddle.net/s0at4w4b/4/

This does not solve the underlying issue, but is a solution for your current problem.