whtas meaning ~ when use css code

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>