• Теория
  • Теория

Чудеса с ~ и :checked

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

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

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

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

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

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

Хотите научиться профессионально писать код на самом востребованном языке программирования? Записывайтесь на профессию «React-разработчик», которая стартует 20 мая 2024. Всего от 4130 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Селекторы. Тонкости» тренажёра «Продвинутые селекторы атрибутов и состояний» можно после регистрации и оформления подписки.