Informatică Baze de date
CSS selectors avansati
Selectorii CSS avansați permit stilizarea precisă a elementelor HTML bazată pe relații, stări sau atribute specifice. Spre deosebire de selectorii de bază (ca clase sau ID-uri), aceștia oferă control mai fin asupra layout-ului și interacțiunilor.
Tipuri comune de selectori avansați
- Selectorul de copil direct (>) Selectează elementele care sunt copii direcți ai unui părinte. Exemplu: div > p selectează toate elementele <p> care sunt copii direcți ai unui <div>, dar nu și cele imbricate mai adânc.
- Selectorul de frate adiacent (+) Selectează primul element care urmează imediat după un alt element. Exemplu: h1 + p aplică stiluri doar primului <p> care vine după un <h1>.
- Selectorul de atribut ([atribut=valoare]) Selectează elementele cu un atribut specific. Exemplu: input[type='text'] selectează toate câmpurile de text într-un formular.
Exemple practice de utilizare
- 1 Pasul 1: Stilizarea listelor imbricate Folosește ul > li pentru a aplica un stil doar elementelor <li> direct sub un <ul>, ignorând cele din subliste. CSS: ul > li { color: blue; }.
- 2 Pasul 2: Highlight pe hover pentru linkuri Utilizează a:hover pentru a schimba culoarea linkurilor la trecerea mouse-ului. CSS: a:hover { color: red; }.
- 3 Pasul 3: Selectarea elementelor pare în tabele Folosește tr:nth-child(even) pentru a colora rândurile pare ale unui tabel. CSS: tr:nth-child(even) { background-color: #f2f2f2; }.
Experimentează cu acești selectori într-un editor online precum CodePen pentru a vedea efectele în timp real.