Благодаря селектору :checked, с помощью чистого CSS можно создавать очень много интересных эффектов, так как мы можем не просто выбирать отмеченные поля форм, но и влиять с помощью этих полей на другие элементы.

Для этого нам нужно комбинировать :checked и ~, который позволяет выбрать все элементы, идущие за отмеченным полем. Пример:

input:checked ~ .item {
  color: red;
}

Такое CSS-правило задаст красный цвет, всем элементам с классом item, расположенным после отмеченного поля.

Получается, что мы можем с помощью чекбоксов или радиокнопок управлять внешним видом других элементов. С помощью этого приёма, например, делают переключающиеся вкладки, которые работают без JavaScript.

Давайте разберём пример попроще. Добавим переключатели, которые будут показывать определённых котов.