Selectori CSS Avansați Ghid Rapid

In this tutorial, you'll learn about Selectori CSS Avansați Ghid Rapid. We cover key concepts, practical examples, and best practices.

Vei învăța cum să folosești selectori CSS avansați pentru a stiliza elemente precise fără a adăuga clase sau ID-uri suplimentare în HTML.

Problema

Adăugarea de clase și ID-uri pentru fiecare variantă de stil duce la HTML încărcat și întreținere greoaie. Selectorii CSS avansați permit alegerea elementelor pe baza poziției, conținutului sau relațiilor din arborele DOM, reducând dependența de clase suplimentare.

Rezolvare rapidă

Pasul 1: Folosește :nth-child pentru selecție pe poziție

/* Greșit — clasă separată pentru fiecare rând */
.row-odd { background: #f5f5f5; }
.row-even { background: #fff; }

/* Corect — stil automat pe baza poziției */
tr:nth-child(odd) {
    background: #f5f5f5;
}
tr:nth-child(even) {
    background: #fff;
}

Rezultat: Rândurile alternează automat culoarea fără clase suplimentare.

Pasul 2: Folosește :not pentru excludere

/* Greșit — suprascriere manuală */
.link { color: blue; }
.link.special { color: red; }

/* Corect — toate link-urile exceptând .special */
a:not(.special) {
    color: blue;
}
a.special {
    color: red;
}

Rezultat: Stilul se aplică tuturor link-urilor mai puțin celui cu clasa .special.

Pasul 3: Folosește :has pentru selecție pe bază de conținut

/* Greșit — JavaScript necesar pentru a detecta conținutul */
/* Corect — selector CSS modern */
.card:has(img) {
    grid-column: span 2;
}

.form-group:has(input:invalid) {
    border-color: red;
}

Rezultat: Cardurile cu imagini ocupă mai mult spațiu, iar câmpurile invalide arată imediat eroarea.

Pasul 4: Combină selectorii pentru precizie maximă

/* Al treilea element dintr-o listă, dar nu ultimul */
li:nth-child(3):not(:last-child) {
    font-weight: bold;
}

/* Primul paragraf din interiorul unui articol care conține un link */
article:has(a) p:first-child {
    font-size: 1.2em;
}

/* Elemente pare din primele 10 */
li:nth-child(-n+10):nth-child(even) {
    background: #f0f0f0;
}

Rezultat: Selecții precise fără clase suplimentare.

Prevenire

• Testează selectorii în DevTools — tab-ul Console primește $$('selector')
• Nu încuiba selectorii mai mult de 3 niveluri
• Folosește :has cu moderație — este puternic dar poate afecta performanța
• Preferă selectori specifici în loc de reguli generale cu :not

Greșeli comune

1. Confundarea :nth-child cu :nth-of-type — :nth-child numără toți copiii; :nth-of-type numără doar copiii de același tip.
2. Folosirea :not cu liste lungi — :not(.a):not(.b):not(.c) este greu de citit; folosește :where sau clase separate.
3. Dependența de :has fără fallback — :has nu este suportat în toate browserele (Safari < 15.4).
4. Selectori prea generali care afectează elemente nedorite — div:first-child poate afecta mai mult decât intenționezi.
5. Combinarea excesivă a pseudo-claselor — Scade lizibilitatea și poate crea reguli greu de întreținut.

Exercițiu

Stilizează o listă cu 10 elemente astfel: primele 3 cu font îngroșat, următoarele 4 cu culoare diferită, ultimele 3 cu fundal gri. Folosește doar selectori CSS, fără clase adiționale.

Întrebări frecvente

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu CSS și HTML pentru productivitate și securitate sporită.