# checked pseudo-class

The `checked` pseudo-class allows you to catch a checked checkbox or `radio`.

Unfortunately, styles for decorating them cannot be specified. For example, you cannot set a background or border color (you can set width and height, for example, but these will not have the same effect as you might expect).

Despite this, you can set styles for adjacent elements, for example, like this: `input:checked + p` - let’s set styles for the paragraph that is placed directly below the checked input.

## Syntax

`element:checked { }`

## Example

Mark the checkboxes and you will see how the `label` tags, which are located immediately after the checked checkboxes, light up in red:

`<input type="checkbox" id="elem1"> <label for="elem1">label 1</label> <br> <input type="checkbox" id="elem2"> <label for="elem2">label 2</label>` `input:checked + label { color: red; }`

:

## Example

Mark `radio` and you will see the `labels`, which are located immediately after the marked radio, light up in red:

`<input type="radio" name="elem" id="elem1"> <label for="elem1">label 1</label> <br> <input type="radio" name="elem" id="elem2"> <label for="elem2">label 2</label>` `input:checked + label { color: red; }`

:

← →
↑
en ru