:checked
The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input (<input>) elements of type radio and checkbox . The :checked pseudo-class selector matches radio and checkbox input types when checked or toggled to an on state. If they are not selected or checked, there is no match.
So when a checkbox is checked, and you are targeting the label immediately after it:
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
} The label text will turn from grey italic to red normal font.
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
The above is an example of using the :checked pseudo-class to make forms more accessible. The :checked pseudo-class can be used with hidden inputs and their visible labels to build interactive widgets, such as image galleries.
More Resources
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Any | 3.1+ | Any | 9+ | 9+ | any | any |
“:checked” selector work to find out the checkbox who are checked .
example
html code::
jQuery code::
$(document).ready(function(){
alert($(“#Demo :checked”).attr(‘id’));
});
Result
1
Not just to find out the element checked but also to style it:
#Demo:checked { color:red; text-decoration:underline; } or
input[type="radio"]:checked{ color:red; … }