[CSS Selector] E:checked

'selector:checked' applies styles to elements that are checked, and is commonly referred to as a 'state pseudo-class'. It does not work in IE8 and earlier.

Since it applies to checked elements, it is mainly used with '' (checkboxes) or '' (radio buttons).

Sample Code

input:checked + p { color: red;} /* Makes the sibling p element red when checked. */

Browser Preview

input:checked + p { color: red;} /* Makes the sibling p element red when checked. */

<input type="checkbox">
<p>Color changes when checked.</p>
<input type="radio">
<p>Color changes when checked.</p>

Browser Support

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

3.1+ ○

2 and earlier ×

Edge

12+ ○

Supported in all versions

IE

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

9+ ○

8 and earlier ×

Mobile

iOS Safari

2+ ○

1 and earlier ×

Android Browser

2+ ○

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data based on MDN.

Home

Tweet

シェアする