Utilko logo Utilko
pseudo-class

:checked Pseudo-Class

Matches radio buttons, checkboxes, and option elements that are currently in the checked or selected state. It is central to CSS-only toggle patterns.

:checked

Example

input[type="checkbox"]:checked + label { color: green; } /* HTML: <input type="checkbox" checked><label>On</label> */

✓ Matches

  • <input type="checkbox" checked>
  • <input type="radio" checked>
  • <option selected>A</option>

✗ Does not match

  • <input type="checkbox">
  • <input type="text">

Browser support

Universal support in all browsers since CSS3.

Related selectors

:hover Pseudo-Class
:hover
:focus Pseudo-Class
:focus
Adjacent Sibling Combinator
A + B
:first-child Pseudo-Class
:first-child
:nth-child() Pseudo-Class
:nth-child(An+B)

← All CSS selectors · CSS selectors cheat sheet