I selettori di CSS3 consentono di effettuare query complesse sugli elementi del DOM basandosi sulla loro gerarchia, così da poter applicare uno stile grafico senza dover necessariamente intervenire sul markup della pagina (ad esempio aggiungendo un attributo ID o class).
La pseudo-classe :nth-child(expr) consente di determinare gli elementi in base alla loro posizione rispetto ai fratelli (siblings) nell'albero del documento. Specificando come espressione le costanti even e odd è possibile ottenere rispettivamente gli elementi pari e quelli dispari.
Nell'esempio di codice che segue alle righe 1, 3 e 5 della tabella (odd) verrà applicato uno sfondo bianco e alle righe 2, 4 e 6 (even) giallo.
<style> table tr:nth-child(odd) { background: white; } table tr:nth-child(even) { background: yellow; } </style> <table> <tr><td>Riga numero 1</td></tr> <tr><td>Riga numero 2</td></tr> <tr><td>Riga numero 3</td></tr> <tr><td>Riga numero 4</td></tr> <tr><td>Riga numero 5</td></tr> <tr><td>Riga numero 6</td></tr> </table>
È possibile utilizzare espressioni più complesse con an+b per ottenere tutti i nodi che abbiano an+b-1 fratelli che li precedono nella gerarchia (per n maggiore o uguale a zero).
Di seguito alcuni esempi per chiarire meglio un concetto che a prima vista può sembrare complesso:
al selettore :nth-child(1) corrisponde il primo nodo (equivale di fatto alla pseudo-classe :first-child;
al selettore :nth-child(3n) corrispondono il terzo, il sesto, il nono, ecc. nodo; even equivale pertanto all'espressione 2n
al selettore :nth-child(10n+9) corrispondono il nono, il diciannovesimo, il ventinovesimo, ecc. nodo; può anche essere espresso come :nth-child(10n-1); odd equivale pertanto all'espressione 2n-1
I selettori di CSS3 sono utilizzati, oltre che nei fogli di stile, anche per l'accesso agli elementi del DOM via JavaScript attraverso le nuove Selectors API di HTML5 o con framework come jQuery.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Gestire domini wildcard in Azure Container Apps
Hosting di componenti WebAssembly in un'applicazione Blazor static
Eseguire query verso tipi non mappati in Entity Framework Core
Creazione di componenti personalizzati in React.js con Tailwind CSS
Utilizzare i primary constructor di C# per inizializzare le proprietà
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
C# 12: Cosa c'è di nuovo e interessante
Evitare il flickering dei componenti nel prerender di Blazor 8
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Usare il versioning con i controller di ASP.NET Core Web API
Determinare lo stato di un pod in Kubernetes
I più letti di oggi
- Miglioramenti nelle performance di Angular 16
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- HTML5 con CSS e JavaScript
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)