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 ther

Answer 1

As far as I know, the the active state will bubble up. So all parent nodes will have an active state.

Therefore, I don't now of a pure CSS solution. You can avoid a javascript solution (which I assume is what you're really after), by altering the markup so that the div that has an active state is no longer a parent of the button. You can make them siblings, for example.

The CSS part of that solution is then fixing the layout so it appears the same now that they are sibilings as what it did when they were parent>child.

Without seeing a fiddle of what you're working with, I can't offer you a more specific solution I'm afraid.