title: CSS: Prevent parent element getting :active pseudoclass when child element is clicked
body: <p><strong><a href="http://jsfiddle.net/s0at4w4b/">JSFiddle</a></strong></p>
  
  <p>When you click the <code>button</code>, you see that <code>:active</code> pseudoclass is triggered for the parent <code>div</code>. Is there a <em>pure CSS</em> (or some JS library) way of <code>:active</code> pseudoclass not toggling on <code>button</code> click?</p>
  
  <p>I tried <code>z-index</code>, <code>position: absolute &amp; fixed</code> and no success.</p>