При добавлении label в код checkbox по какой-то причине перестает работать

Question

.burger:checked+div {
  background-color: red;
}

<div>
  <input type="checkbox" name="a" id="inp" class="burger" checked="checked">
  <label for="inp">Label</label>
  <div>Hello</div>
</div>

При добавлении label в код checkbox по какой-то причине перестает работать, как можно это исправить, или переписать но правильно. Если же убрать тег label то все начинает работать как положено.

PS: код написан в очень тестовом варианте, код может быть слабо читаемым, извините. Заранее спасибо за ответ

Answer 1

Один из вариантов, перенести все внутрь label

.checkbox {
  display: block;
  margin-bottom: 1rem;
}

.checkbox__control:checked~.checkbox__text {
  background-color: red;
}

<label class="checkbox">
    <input type="checkbox" name="a" class="checkbox__control" checked>
    <span class="checkbox__label">Label</span>
    <span class="checkbox__text">Hello</span>    
  </label>
<label class="checkbox">
    <input type="checkbox" name="a" class="checkbox__control" checked>
    <span class="checkbox__label">Label 2</span>
    <span class="checkbox__text">Hello 2</span>    
  </label>

Answer 2

Селектор .burger:checked+div обозначает выбрать div, который находится на том же уровне вложенности, что и .burger:checked, и следует непосредственно за ним. Но у вас непосредственно за чекбоксом следует элемент label. Соответственно селектор не выбирает элементов.

Вам же нужно указать комбинатор ~, который выберет все элементы на том же уровне вложенности

.burger:checked~div {
  background-color: red;
}

<div>
  <input type="checkbox" name="a" id="inp" class="burger" checked="checked">
  <label for="inp">Label</label>
  <div>Hello</div>
</div>

БЛОГ НА HUSL

При добавлении label в код checkbox по какой-то причине перестает работать

Ответы (2 шт):