.choice:checked + label { color: #166534; font-weight: 700; }Eticheta opțiunii selectate devine verde și accentuată.
LECȚIA 86 DIN 100
Răspunde la un checkbox bifat
Evidențiază eticheta imediat următoare când opțiunea este bifată.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
:checked selectează controalele bifate, iar combinatorul + selectează fratele imediat următor. Structura HTML trebuie să păstreze label după input pentru ca relația să existe.
.choice + label:checked { color: #166534; }Label nu este control bifabil; :checked trebuie aplicat inputului înaintea combinatorului.
PASUL 2 · APLICĂ
Exercițiul tău
Pentru .choice:checked + label, setează color la #166534 și font-weight la 700.
index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ
Ce trebuie să treacă
0%neverificat
- ○Eticheta bifată folosește #166534.
- ○Eticheta bifată are greutatea 700.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Pseudo-clasa identifică starea controlului, iar + transferă efectul vizual către eticheta imediat următoare.