JSFiddle - React, Tailwind, and code Playground

by Jonathan Sampson

HTML

<h1><code>:active</code> doesn't bubble up in IE10/Opera11.64*</h1>
<p>Click and hold on Child. Parent and Child <em>should</em> both turn red.</p>
<div class="parent">
    Parent
    <div class="child">Child</div>
</div>
<p>Internet Explorer 10 / Opera 11.64:</p>
<p>Clicking on Child will result in the child element becoming :active, but not the Parent.</p>
<p>Chrome 19.0.1084 / Firefox 12:</p>
<p>Clicking on Child will result in both the child element and parent element becoming :active.</p>

<p><strong>*</strong><a href="http://jsfiddle.net/jonathansampson/UrN39/2/">Opera does bubble up for anchors</a>.</p>

CSS

.parent {
    background: #f1f1f1;
    padding: 10px;
}
.child {
    background: #CCC;
}
div:active {
    background: red;
    color: white
}