Возможен ли такой CSS селектор?

Question

[Дмитрий Иноземцев]

Всем привет. Есть такой код:

<div class = "one">
         <input type = "checkbox">
</div>
<div class = "two">
	<label>Label</label>
</div>

Можно ли при помощи CSS задать стили label'у при условии, что чекбокс checked, при такой структуре кода?
Если нет, как это лучше реализовать при помощи JS?
Заранее большое спасибо за ответы.

Comments

[Андрей Федоров]

Проблема в том, что элементы, для которых вы хотите построить зависимость - от разные родителей. Сделайте их дочерними одного родителя и можно сделать так:
codepen.io/aliencash/pen/jbPWwX

[Дмитрий Иноземцев]

Андрей Федоров: если бы это было возможно, я бы не создавал здесь тред. Увы, обстоятельства диктуют :)

Answer 1

[Виталий Инчин ☢]

Можно ли при помощи CSS задать стили label'у при условии, что чекбокс checked, при такой структуре кода?

Нет.

Если нет, как это лучше реализовать при помощи JS?

А вот это изи:

document.querySelector("input").onchange = function(){
   this.parentNode.classList.toggle("checkeder");
}

.checkeder ~ .two > label{
   color: red;
}

Потрогать можно тут.

Answer 2

[Mr Crabbz]

или через jquery:

$("input[type=checkbox]:checked").parent().next(".two").find("label")

Answer 3

[Сергей Протько]

нет. Селекторы разбираются справа-на лево, строго вверх по дереву. Вы максимум можете проверять селектором соседние элементы, но вниз по дереву спуститься увы нельзя.