:check Back

• Radio (<input type="radio">) and checkbox (<input type="checkbox">) elements can be toggled by the user. Some menu items are "checked" when the user selects them. When such elements are toggled "on" the :checked pseudo-class applies.
• :checked is used to select and style checkbox (<input type="checkbox">), radio (<input type="radio">) or option (<option></option> in a <select></select>) that are checked or toggled "on" by the user (when the page loads at first).

Case 1: check the checkbox and radio

<input type="radio" id="box-1" checked><label for="box-1">radio</label>
<input type="checkbox" id="box-2" checked><label for="box-2">checkbox</label>

See the Pen OMxNrV by aleen42 (@aleen42) on CodePen.

Case 2: selected option

<select name="options" id="list">
    <option value="Something" selected>This option is selected</option>
    <option value="Something-else">This one is not</option>
</select>

See the Pen OMxNdV by aleen42 (@aleen42) on CodePen.

Case 3: styles for :checked

<input type="checkbox" id="todo">
<label for="todo">Buy Milk</label>

input[type="checkbox"]:checked + lable {
    color: #999;
    text-decoration: line-through;
}

See the Pen yezOro by aleen42 (@aleen42) on CodePen.