AlexFo90
@AlexFo90

Как поменять стили у дочерних блоков при нажатии на основной при помощи CSS?

Добрый день! вопрос вот какой: есть такой HTML, хочу сделать чтоб при нажатии на main-block менялись стили у его дочерних элементов. У block1 менялся background, у block2 цвет текста, у block3 тоже background. Все переключение идет checkbox. Может делаю неправильно, но вроде должно работать? Или стили пишу неправильно, вообщем запутался)
если у кого появиться желание подсказать, заранее благодарен!!!
И без Js!

<label for="push">
    <div class="main-block">
        <div class="block1"></div>
        <div class="block2"></div>
        <div class="block3"></div>
    </div>
</label>
<input type"checkbox" id="push">


CSS
или + (все равно не помогает)
input[type="checkbox"]:checked .main-block {
.block1 {
background-color: #999;
}
.block2 {
color: #fff;
}
.block3 {
background-color: #555;
}
}
  • Вопрос задан
  • 229 просмотров
Решения вопроса 1
@Flying
Для того чтобы всё заработало - необходимо чтобы input стоял перед label, а не после. CSS селекторы работают только "вперёд", соответственно если хочется завязать изменение стилей на состояние checkbox - он должен располагаться в DOM раньше чем элементы к которым будут применяться стили, зависящие от состояния checkbox'а
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
[type=checkbox]:checked + .my_block {}
в этом вся магия
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы