Zmiana labela po zaznaczeniu checkbox

Question

Zależy mi na tym aby po zaznaczeniu checkbox zmienić wygląd etykiety. Mam taki kod, ale nie działa:

HTML

<div class="artists">
  <label><input type="checkbox"> 3BIT     <span class="small">(15)</span></label>
</div>

 

CSS

.artists input[type="checkbox"]:checked + label
{
  font-weight:800;
}

Czy ktoś jest w stanie podpowiedzieć mi co robię źle?

Answer 1

Ten kod CSS oznacza "znajdź label, który znajduje się po zaznaczonym polu typu checbkox wewnątrz elementu .artists". Ale u Ciebie ten label jest rodzicem tego inputa, więc selektor w CSS-ie nigdy nie załapie. Musiałbyś albo zmienić strukturę HTML (czyli wyciągnąć input przed label), albo zastosować magię :has() i zmienić selektor na coś typu label:has(input:checked).

Comments

Rewelacja! Działa. Dzięki!