Правильный порядок стилей CSS и почему не работает код CSS?

Question

[Олег]

Господа есть вот такой пример.
В нем 2 чекбокса.
В первом и втором блоке DIV последовательность полей разная.

И вот не могу понять, почему в одном варианте код работает, во втором нет.

ПРИМЕР КОДА:
https://codepen.io/vanderdt/pen/JjPWwEQ

Answer 1

[Даниил Маслов]

~ выбирает элементы, которые находятся после указанного элемента, если у них общий родитель.

Соответственно, у вас есть input:checked ~ label и поэтому второй вариант работает, так как label стоит после, а первый — нет.

Comments

[Олег]

СПАСИБО

[Rustam Bainazarov]

VDT2, потому что label идёт до input, поэтому любое изменение в input (атрибут :checked) для label через CSS не доступны. Происходит это причине того, что CSS не умеет идти выше по коду, а только вперёд.

Answer 2

[WapSter]

Конструкция с применением зависимости ~ работает, только на ниже лежащие блоки от селектора к которому применяете, в данном случае у вас это input

Comments

[Rustam Bainazarov]

VDT2, что это «обратная зависимость» значит?

Если вы про ситуацию, когда нужно применить стили к предыдущему элементу, то CSS это не умеет на данный момент.

[WapSter]

VDT2, оно работает

[Олег]

Рустам Байназаров, Я про проблему первого блока. Мне нужно оставить сначала метку потом ввод, при этом чтобы стили применились в том виде, в котором они работают во втором блоке.

Уже все перепробовал.

p.s. Можно, конечно, переписать HTML проекта, но интереснее решить проблему именно с точки зрения ЦСС.

[Rustam Bainazarov]

VDT2, как я написал вам уже выше, с точки зрения CSS вы эту проблему не решите, ибо наверх по коду он идти не умеет.

Поэтому второй вариант, где input идёт первый в разметке, — правильный для данной задачи.