Beware of the difference between ~ and ~= in selectors. The question refers to ~ which is used in a selector to find elements preceded by other elements with the same parent (see
http://www.w3schools.com/cssref/sel_gen_sibling.asp[
^]).
In the example in question, the z-index will be applied to all elements that have class="content" preceded by a label tag that is preceded by a checked radio button (all with the same parent). If that CSS code were applied to the following HTML, only "Content B" would be affected.
<label for="Choice_1">Choice 1</label>
<input type="radio" name="Question_1" id="Choice_1" value="1" checked=""><br />
<label for="Choice_2">Choice 2</label>
<input type="radio" name="Question_1" id="Choice_2" value="2"><br />
<label for="Choice_3">Choice 3</label>
<input type="radio" name="Question_1" id="Choice_3" value="3"><br />
<div>
<div class="content">Content A</div>
<label for="Choice_1">Choice 1</label>
<input type="radio" name="Question_2" id="Choice_1" value="1" checked=""><br />
<label for="Choice_2">Choice 2</label>
<input type="radio" name="Question_2" id="Choice_2" value="2"><br />
<label for="Choice_3">Choice 3</label>
<input type="radio" name="Question_2" id="Choice_3" value="3"><br />
<div class="content">Content B</div>
</div>