Работа псевдокласса :checked в связке с другими классами?

Question

[lodbrock]

Добрый день. Разъясните насчет использования псевдокласса :checked с другими классами, я так понял что работать он будет с комбинаций ~ во втором случае.
1)

#btn-1:checked .slider-controls label {
    background-color: #666666;
}

2)

#btn-1:checked ~ .slider-controls label {
    background-color: #666666;
}

Answer 1

[#FFFFFF]

мне кажется, тут суть не в :checked. Просто логично, что в чекбоксе у вас не может быть вложен другой селектор. А вот рядом стоять (~) может. Поэтому 1й вариант работать не может, а второй - да (сложно утверждать на 100%, не видя вашего HTML)

Answer 2

[hesrun]

Да, т.к. первый селектор подразумевает, что .slider-controls label находится в инпуте, а такого быть не может...

По этому рабочий второй вариант, они ищет братьев по дом дереву. Тут два варианта или "+" - если нужен следующий, или "~" - если нужные все следующие братья.

Ну или по чекеду применяться стили для самого инпута.