Fake previous item selector

dabblet.css

/* Fake previous item selector */

/* Fix for +/~ selectors in webkit */
@-webkit-keyframes bugfix { from { margin: 0; } to { margin: 0; } }
label {
	-webkit-animation: bugfix infinite 1s;
}

input {
	position: absolute;
	clip:rect(1px,1px,1px,1px);
}

label {
	padding: 0.5em;
	display: inline-block;
	cursor: pointer;
}

input:checked + label {
	background: blue;
}
input:checked + label + input + label,
input:checked + input + label,
input:checked + label + label {
	background: lime;
}
input:checked + input + label + input + label,
input:checked + label + input + label + input + label,
input:checked + label + input + label + label,
input:checked + input + label + label {
	background: red;
}

dabblet.html

<h1>Lime — selected, blue — previous, red — next</h1>
<p>
    <input type="radio" name="test1" id="test1_a" checked />
    <input type="radio" name="test1" id="test1_b" />
    <label for="test1_a">a</label>
    <input type="radio" name="test1" id="test1_c" />
    <label for="test1_b">b</label>
    <input type="radio" name="test1" id="test1_d" />
    <label for="test1_c">c</label>
    <input type="radio" name="test1" id="test1_e" />
    <label for="test1_d">d</label>
    <input type="radio" name="test1" id="test1_f" />
    <label for="test1_e">e</label>
    <input type="radio" name="test1" id="test1_g" />
    <label for="test1_f">f</label>
    <label for="test1_g">g</label>
</p>
    
<p>
    <input type="radio" name="test2" id="test2_a" checked />
    <input type="radio" name="test2" id="test2_b" />
    <label for="test2_a">a</label>
    <input type="radio" name="test2" id="test2_c" />
    <label for="test2_b">b</label>
    <label for="test2_c">c</label>
</p>

<p>
    <input type="radio" name="test3" id="test3_a" checked />
    <input type="radio" name="test3" id="test3_b" />
    <label for="test3_a">a</label>
    <label for="test3_b">b</label>
</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}