gecheckter Zustand eines Radiobuttons mittels CSS3 abfragen

by Jens Grochtdreis

HTML

<div>
    <input type="radio" name="vote" value="Option 1" id="vote1" />
    <label for="vote1">Option 1</label>
    <input type="radio" name="vote" value="Option 2" id="vote2" />
    <label for="vote2">Option 2</label>
    <input type="radio" name="vote" value="Option 3" id="vote3" />
    <label for="vote3">Option 3</label>
    <input type="radio" name="vote" value="Option 4" id="vote4" />
    <label for="vote4">Option 4</label>
</div>

<p>Bei der Markierung mittels des verwendeten CSS-Selektors ist die Reihenfolge im Code entscheidend. Dreht man die Reihenfolge um, funktioniert der Selektor nicht mehr wie gewünscht.</p>

<div>
    <label for="vote5">Option 5</label>
    <input type="radio" name="vote2" value="Option 5" id="vote5" />
    <label for="vote6">Option 6</label>
    <input type="radio" name="vote2" value="Option 6" id="vote6" />
    <label for="vote7">Option 7</label>
    <input type="radio" name="vote2" value="Option 7" id="vote7" />
    <label for="vote8">Option 8</label>
    <input type="radio" name="vote2" value="Option 8" id="vote8" />
</div>

CSS

p { margin: 30px 0 15px 0; color: #a20000;}
:checked + label { color: #a20000;}