Почему не срабатывает стилизация одного из элементов при checkbox:checked?

Question

Денис Каракчиев @uokersam

Почему не срабатывает стилизация одного из элементов при checkbox:checked?

input[type='checkbox']:checked
  + span
    border-color: #39ca74
  span#text
    color: #fff

Допустим, есть некий стилизованный через лэйбл чекбокс и некие элементы внутри лейбла после данного чекбокса. Так вот элемент по селектору '+ span' стилизуется нормально, а второй - не хочет. В чем может быть проблема? (спаны распологаются в DOM один за другим. (если я не накосячил в скрипте, который их добавляет, но так как все остальное работает - не должен был).

(На случай, если кто-нибудь захочет покопаться)

Вопрос задан более трёх лет назад
414 просмотров

Комментировать

Подписаться 1 Оценить Комментировать

Answer 1 · 2017-04-14 16:11:35

И в скрипте и в стилях был косяк ;)

codepen.io/anon/pen/MmYQzo?editors=1111
для второго span нужно указать селектор input:checked ~ span (выбирает все следующие соседние span'ы после input:checked), а не input:checked + span (выбирает первый следующий соседний span)

А в скрипте, можно поправить так:

var $span = $('<span id="text"></span>').text($input.val())
$('.todo-items label:first-child').append($span);

Почему не срабатывает стилизация одного из элементов при checkbox:checked?

Войдите на сайт