.card.featured { border-color: #0ea5e9; }\n.card { border-color: #cbd5e1; }Cardul featured păstrează conturul cyan chiar dacă regula generală apare după.
LECȚIA 18 DIN 100
Selector compus mai specific
Combină două clase pentru varianta evidențiată a unui card.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
Fiecare selector de clasă contribuie la componenta de clasă a specificității. .card.featured este mai specific decât .card.
.featured { border-color: #0ea5e9; }\n.card { border-color: #cbd5e1; }Cei doi selectori au câte o clasă, deci regula generală de la final poate câștiga.
PASUL 2 · APLICĂ
Exercițiul tău
Completează selectorul .card.featured cu border-color #0ea5e9.
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
- ○Varianta featured are culoarea de contur cerută.
- ○Cardul general păstrează conturul gri.
- ○Regula generală apare după varianta mai specifică.
Explică-mi logica rezolvării
Selectorul compus descrie varianta fără ID și fără !important.