:checked и ~


#1

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

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

А можно как-нибудь связать :checked и элементы, идущие перед ним? например, чтобы по нажатию кнопки менялся цвет блока, в которой эта кнопка лежит


#2

можно, например, хитро извратиться и в коде оставить кнопку перед целевым блокомХ, но при этом абсолютно спозиционировать её внутрь этого блока. тогда схема :checked ~ будет по прежнему работать


#3

Тогда можно будет задавать кнопке абсолютное позиционирование относительно целевого блокаХ? Или ее придется по-любому позиционировать относительно родительского контейнера?


#4

нет, позиционирование работает только относительно родителя (а не “соседа”). Просто чтобы кнопка и блокХ оказались “в связке”, последний можно спозиционировать относительно того же родителя.