Per semplificare la lettura delle tabelle, è spesso utile creare righe con colori di sfondo alternati. Uno dei modi più comuni per creare tabelle è quello di impostare il colore di sfondo di ogni altra riga. Questo è spesso indicato come "strisce zebra".
È possibile farlo impostando ogni altra riga con una classe CSS e quindi definendo lo stile per quella classe. Funziona ma non è il modo migliore o più efficace per farlo. Quando si utilizza questo metodo, ogni volta che è necessario modificare tale tabella, potrebbe essere necessario modificare ogni singola riga nella tabella per garantire che ogni riga sia coerente con le modifiche. Ad esempio, se inserisci una nuova riga nella tua tabella, ogni altra riga sotto di essa deve avere la classe modificata.
I CSS facilitano lo stile dei tavoli con strisce zebrate. Non è necessario aggiungere ulteriori attributi HTML o classi CSS, è sufficiente utilizzare il selettore CSS nth-of-type (n).
Il selettore nth-of-type (n) è una pseudo-classe strutturale in CSS che consente di creare elementi in base alle loro relazioni con elementi padre e fratello. Puoi usarlo per selezionare uno o più elementi in base al loro ordine di origine. In altre parole, può abbinare ogni elemento che è l'ennesimo figlio di un particolare tipo di genitore.
La lettera n può essere una parola chiave (come pari o dispari), un numero o una formula.
Ad esempio, per modellare ogni altro tag di paragrafo con un colore di sfondo giallo, il tuo documento CSS dovrebbe includere:
p: nth-of-type (dispari) { sfondo: giallo;}
Inizia con la tua tabella HTML
Per prima cosa, crea il tuo tavolo come lo scriverebbe normalmente in HTML. Non aggiungere classi speciali alle righe o alle colonne.
Nel tuo foglio di stile, aggiungi il seguente CSS:
tr: nth-of-type (dispari) { background-color: #ccc;}
Questo modulerà ogni altra riga con un colore di sfondo grigio che inizia con la prima riga.
Stile alternando le colonne nello stesso modo
Puoi fare lo stesso tipo di stile per le colonne nei tuoi tavoli. Per fare ciò, basta cambiare il tr nella tua classe CSS in td. Per esempio:
td: nth-of-type (dispari) { background-color: #ccc;}
Usare le formule in un selettore nth-of-type (n)
La sintassi per una formula utilizzata nel selettore è un + b.
- a è un numero che rappresenta il ciclo o la dimensione dell'indice.
- n è in realtà la lettera "n" e rappresenta un contatore, che diventa 0.
- + è un operatore, che può anche essere "-"
- b è un numero intero e rappresenta il valore di offset, ad esempio, quante righe in giù devono essere avviate dal selettore per applicare il colore di sfondo. Questo è richiesto se un operatore è incluso nella formula.
Ad esempio, se si desidera impostare un colore di sfondo per ogni terza riga, la formula sarà 3n + 0. Il tuo CSS potrebbe assomigliare a questo:
tr: nth-of-type (3n + 0) { background: slategray;}
Strumenti utili per l'utilizzo del selettore nth-of-type
Se ti senti un po 'scoraggiato dall'aspetto della formula dell'uso del selettore nth-of-type pseudo-classe, prova il sito: nth Tester come uno strumento utile che può aiutarti a definire la sintassi per ottenere l'aspetto desiderato. Usa il menu a tendina per selezionare il nth-of-type (puoi anche sperimentare con altre pseudo-classi anche qui, come nth-child).
