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
Gestire liste di tipi semplici con Entity Framework Core
Utilizzare database e servizi con gli add-on di Container App
Effettuare il binding di date in Blazor
Sfruttare GPT-4o realtime su Azure Open AI per conversazioni vocali
Generare la software bill of material (SBOM) in GitHub
Le novità di Angular: i miglioramenti alla CLI
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Usare le collection expression per inizializzare una lista di oggetti in C#
Persistere la ChatHistory di Semantic Kernel in ASP.NET Core Web API per GPT
Cancellare una run di un workflow di GitHub
Gestire il colore CSS con HWB
Migrare una service connection a workload identity federation in Azure DevOps
I più letti di oggi
- Utilizzare AAD su SQL Database durante lo sviluppo con Visual Studio
- Utilizzare il TransferControl in Windows Phone
- Gestione dei token negli input di testo con la Universal Windows Platform
- Dare temporaneamente accesso ad un blob di Azure Storage
- Impostare le policy CORS con Azure API Management
- Utilizzare database e servizi con gli add-on di Container App
- Utilizzare HttpModule in modalità asincrona
- Indicizzare i Blob Storage con Azure Search
- Creazione di StateTrigger personalizzati in Universal Windows Platform
- Modificare i criteri della clausola Where del LinqDataSource di ASP.NET