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

Question

[Денис Каракчиев]

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

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

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

Answer 1

[Евгений Кузовлев]

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

Но у вас текст не попадает в спан prntscr.com/ewe5pp
Так же у вас получается несколько одинаковых id на странице

Comments

[Денис Каракчиев]

Ох, то бишь все же накосячил =) Я просто не вижу, в чем причина непопадания текста куда нужно?

[Евгений Кузовлев]

Замените

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

на

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

[Денис Каракчиев]

Евгений Кузовлев: точно. Но странно, по-логике вроде .append должен был нормально вставить внутрь .-. Хорошо, в любом случае разобрались с этой магией, но почему стилизация до сих пор не применяется?

[Евгений Кузовлев]

Потому что вы убрали id из span, но оставили его в стилях (и не поменяли стили)

Здесь все работает codepen.io/KiyoshiSaundo/pen/ZKYrPX?editors=0111

[Денис Каракчиев]

Евгений Кузовлев: благодарю. Можете посоветовать что-нибудь почитать по CSS (справочники постепенно осваиваю =) ), или это только с практикой - читай/не читай?

[Евгений Кузовлев]

Денис Каракчиев: у меня рассылка с этого сайта css-live.ru Бывают интересные статьи и по новинкам информация. А так в основном практика. Но это у меня так

Answer 2

[Eugene Budnik]

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

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);

Comments

[Денис Каракчиев]

Спасибо огромное. В такие моменты чувствуешь себя очень тупым, потому что в справочниках ну хоть убейте не видел упоминания ни о том, что при выборе по id почему-то видит не везде, а цепочка append'ов нормально не append'ит =_= Кстати, в чем причина этих явлений? Ну так, если не лень объяснить, или кинуть "на почитать" =)

[Eugene Budnik]

потому что метод append возвращает элемент к которому добавляешь html, а не тот который добавляешь.