The :checked pseudo-class represents form controls that are currently in a selected or toggled-on state, most commonly checkboxes and radio buttons. It applies when the user has actively selected an option, either by clicking it, tapping it, or through programmatic interaction. This pseudo-class allows developers to visually react to user choices without requiring JavaScript, making it especially useful for creating interactive UI elements such as custom toggles, switches, and selection indicators.

The :checked pseudo-class primarily applies to the input element when its type attribute is set to checkbox or radio, as well as to option elements inside a select menu. When the checked state changes, CSS rules targeting :checked are immediately applied or removed, enabling real-time visual feedback. This behavior is often combined with layout or visibility changes to show or hide related content.

One of the most powerful aspects of :checked is its ability to work with sibling and descendant selectors. This allows you to create interactive components - such as tab systems, accordions, or toggle switches - using only CSS. For example, a hidden checkbox can control the visibility of another element using selectors like :checked + label or :checked ~ div. This approach keeps markup semantic while avoiding unnecessary scripting.

Basic Example: Styling a Checked Checkbox

<label>
  <input type="checkbox" class="toggle">
  Enable feature
</label>

.toggle:checked {
  outline: 2px solid blue;
}

In this example, the checkbox receives a visual outline only when it is checked.

Example: Toggling Content Visibility

<input type="checkbox" id="show-info">
<label for="show-info">Show more info</label>

<div class="info">
  This content appears when the checkbox is checked.
</div>

.info {
  display: none;
}

#show-info:checked ~ .info {
  display: block;
}

Here, the content becomes visible only when the checkbox is checked, demonstrating how :checked can drive UI behavior without JavaScript.

The :checked pseudo-class is frequently paired with properties like display, background-color, and transform to create smooth, intuitive interactions. When combined thoughtfully, it enables highly interactive interfaces while keeping code lightweight, accessible, and easy to maintain.