"Благодаря селектору :checked, с помощью чистого CSS можно создавать очень много интересных эффектов, так как мы можем не просто выбирать отмеченные поля форм, но и влиять с помощью этих полей на другие элементы.
Для этого нам нужно комбинировать :checked и ~, который позволяет выбрать все элементы, идущие за отмеченным полем."
А можно как-нибудь связать :checked и элементы, идущие перед ним? например, чтобы по нажатию кнопки менялся цвет блока, в которой эта кнопка лежит
можно, например, хитро извратиться и в коде оставить кнопку перед целевым блокомХ, но при этом абсолютно спозиционировать её внутрь этого блока. тогда схема :checked ~ будет по прежнему работать
Тогда можно будет задавать кнопке абсолютное позиционирование относительно целевого блокаХ? Или ее придется по-любому позиционировать относительно родительского контейнера?
нет, позиционирование работает только относительно родителя (а не “соседа”). Просто чтобы кнопка и блокХ оказались “в связке”, последний можно спозиционировать относительно того же родителя.