Как по :checked добавить класс родителю?

Question

[lavezzi1]

Привет. Есть такая конструкция:

<label class="radio">
        <div>
            <input type="radio">
            <span class="radio-border"></span>
            <span class="radio-inner-dot"></span>
        </div>
    </label>

Спаны красятся без проблем

&:checked {
        & ~ .radio-border {
            border: none;
            background-color: $green;
        }

        & ~ .radio-inner-dot {
            background-color: white;
            transform: scale(0.5);
            opacity: 1;
            z-index: 0;
        }

Но мне нужно изменить родителя, то есть в моем случае это Label. Как это сделать?

Так не работает

&:checked {
        & ~ .radio {
            background-color: $green;
        }

Comments

[Ankhena]

Родитель у Вас div, а не label.

Используйте JS, http://jquery.page2page.ru/index.php5/Выделить_свя...

Answer 1

[iBird Rose]

поставь label под input и прописывай ему стили через :checked+label {}

<input type="radio">
<label class="radio"></label>

Answer 2

[Александр]

li:has(> a.active)
в гугле есть такой пример, стили применяются к li

Comments

[fetis26]

да, только поддержка браузерами нулевая у него.

[Александр]

а чего js не хотите?

Answer 3

[fetis26]

В настоящий момент никак. Родительского селектора нет, :has() пока не работает нигде.

Answer 4

[Антон Иванов]

Только на JS

Answer 5

[GreatRash]

И вообще нельзя вставлять <div> внутрь <label>.

Comments

[Слава]

Можно

[GreatRash]

Слава: Пруф есть?