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
Autenticazione basata su certificati con ASP.NET Core
Layout skeleton per Screen Reader
Conversione di tipo in una pipeline di Azure DevOps
Performance in .NET 6
.NET per sviluppatori AWS
Forzare la lingua dell'interfaccia di Azure Active Directory B2C
Aggiungere temi custom a Blazor
Creare l'effetto floating label per gli input con Bootstrap 5
Eliminare spazio inutilizzato in un Azure Container Registry
Impostare un promemoria per ruotare le chiavi di Azure Storage
GitHub e .NET 6
Eseguire uno scroll all'interno di una pagina Blazor
I più letti di oggi
- Monitorare contemporaneamente i cambiamenti di più proprietà dello scope di AngularJS
- "welcome to the modern web development" con @dbochicchio e @kasuken, ora live per iniziare #PWAConfIT parleremo di #PWA e di come costruire applicazioni web moderne per tutto il pomeriggio. Seguiteci live su https://aspit.co/PWAConf-20 #aspilive
- Sfruttare le dipendenze con il model binding di ASP.NET Web Forms
- rilasciato #vs2017.5, con importanti aggiornamenti sulla velocità di caricamento dei progetti, supporto a C# 7.2 e nuove feature di Xamarin.disponibile inoltre anche #VS for #Mac, con sign integrato delle app iOS.altre informazioni su https://aspit.co/bkk
- Disabilitare un pulsante in Blazor durante il salvataggio