Construction

dabblet.css

/* Construction */
span {
    display: block;
    position: relative;
    width: 60px;
    height: 60px;
    background: red;
    }

b {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 40px;
    height: 40px;
    background: blue;
    }

i  {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    background: green;
    }

/* Experiments */
html:active { background: #ededed; } /* Light gray */

.test1-2 span:active { background: yellow; }

.test2 span:active b,
.test3 span:active b,
.test4 span:active b { background: yellow; }

em.pseudo,
.test4 span:after {
    content:"";
    position: absolute;        
    top: 0; right: 0; bottom: 0; left: 0;
    }

/* Glamour */

body {
    font-family: Arial;
    }

dabblet.html

<h3>Родители наследуют :active стейт потомка</h3>
<div class="test1"><span><b><i></i></b></span></div>
<h4>Отслеживыние более одного :active элемента</h4>
<div class="test1-2"><span><b><i></i></b></span></div>
<h3>Каскад от активного элемента</h3>
<div class="test2"><span><b><i></i></b></span></div>
<h3>Наследование активного стейта от абсолютного элемента</h3>
<div class="test3"><span><b><i></i></b><em class="pseudo"></em></span></div>
<h3>Наследование активного стейта от псевдоэлемента</h3>
<div class="test4"><span><b><i></i></b></span></div>​

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}