Colore della riga alternativa CSS
Sintassi:
La sintassi del selettore di stile per modificare il colore delle righe alternative è la seguente:
: nth-child (anche o dispari)Dichiarazione CSS;
Esempio n. 1: cambiare il colore delle righe uniformi
Crea il file HTML per creare tabelle contenenti righe e colonne e modificare il colore delle righe alternative utilizzando il selettore in stile CSS. Il software che utilizziamo per eseguire questi esempi è Visual Code Studio. Dobbiamo generare il file HTML e digitare il codice dell'HTML che utilizziamo per creare la tabella. Puoi vedere il codice per la creazione della tabella in HTML e questo file deve essere salvato con ".estensione del file html ".
Qui, disegneremo una tabella e aggiungeremo i dati nelle righe e nelle colonne della tabella. IL "
"Con le celle di intestazione. Quindi aggiungiamo i dati in queste celle all'interno del "
Quando viene creata questa tabella, modelliamo questa tabella e cambiamo il colore delle righe alternative. Per questo, progetteremo il file CSS in questo codice Visual Studio seguente:
Codice CSS:
Questo codice è per colorare le righe alternative della tabella che abbiamo creato. Questo file verrà salvato con il ".Estensione del file CSS ". Useremo il file CSS per applicare il selettore di stile CSS per modificare il colore alternativo delle righe.
Accogliamo il tavolo usando la proprietà "Collapse a confine" che definisce se il bordo della tabella collassa in un singolo bordo o è separato. Qui, l'abbiamo impostato come "crollo". Usando questa proprietà, abbiamo un singolo bordo del tavolo. La larghezza di questa tabella è impostata sul "100%". Quindi arrivano "Th" e "TD" che rappresentano le celle di intestazione e le celle semplici. Ora, li modelliamo usando il "allineamento del testo" che allinea il testo all'interno delle celle alla "sinistra" mentre lo impostiamo sulla "sinistra". Quindi utilizziamo il selettore di stile di CSS per cambiare il colore delle righe alternative. Applichiamo il ": nth-child ()" in modo che cambierà il colore delle righe pari della tabella. Posizioniamo il colore "verde chiaro" come colore di sfondo delle righe pari usando la proprietà CSS-color.
Produzione:
L'output viene reso sullo schermo premendo "Alt+B" all'interno del file HTML che abbiamo creato in precedenza. L'output mostra il colore verde per tutte le righe pari mentre applichiamo il selettore di stile alle righe pari della tabella.
Esempio n. 2: cambia il colore delle righe dispari
In questo esempio, cambieremo il colore delle file dispari della tabella precedente che abbiamo progettato nel primo esempio.
Codice CSS:
Il bordo del tavolo viene crollato qui, quindi appare come un singolo bordo. La larghezza della tabella è "110%". Il "align del testo" viene utilizzato per l'allineamento del testo. Posiziona il testo all'interno delle celle che vogliamo. Abbiamo impostato il "allineamento del testo" sul "centro", quindi il testo viene posizionato al centro della cella. La "imbottitura" genera lo spazio tra il bordo della tabella e il contenuto scritto nella tabella. Questa "imbottitura" è "10px", quindi viene utilizzato per generare uno spazio "10px" tra il contenuto della tabella e il bordo. Passiamo quindi "dispari" al selettore di stile. Abbiamo impostato il colore "rosa" come sfondo delle file dispari e il colore delle strane righe sarà reso come "rosa". Controlliamo il seguente output:
Produzione:
Qui, vediamo che il colore di sfondo delle strane righe diventa rosa perché abbiamo cambiato il colore delle righe alternative.
Esempio n. 3: cambia il colore delle righe pari e dispari
Nel nostro terzo esempio, cambieremo i colori delle righe pari e dispari usando lo stesso selettore di stile di CSS che abbiamo usato anche negli esempi precedenti. Ma qui, useremo sia la tabella singola.
Codice CSS:
La larghezza è selezionata come "100%". Il confine è impostato su "crollo". L'imbottitura è selezionata come "7px". Il "bordo" è di colore "nero", circa 2px "di larghezza e il tipo di bordo creato è" solido ". Innanzitutto, impostiamo il colore di sfondo della riga come "rosa", ma quando usiamo il selettore di stile, il colore delle righe cambierà. Applichiamo il selettore di stile al numero "dispari" di righe. Questo cambierà il colore delle righe dispari nel nostro tavolo. Vogliamo cambiare il colore di sfondo delle righe dispari in azzurro, quindi utilizziamo la proprietà "color sfondo" che è fornita dal CSS e impostare il "colore" su "blu chiaro". Quindi, cambiamo anche il colore delle file "anche" in "giallo-verde". Usiamo di nuovo lo stesso selettore di stile e questa volta, lo usiamo per cambiare il colore delle righe pari. Mettendo il colore "giallo-verde" per le file.
Produzione:
In questo output, le righe alternative mostrano colori diversi. Le file dispari sono azzurra e le file pari sono gialli. Questo è il modo per cambiare il colore delle righe alternative usando il selettore in stile CSS.
Conclusione
Questa guida ha spiegato il concetto di modificare i colori delle righe alternative utilizzando il selettore CSS nth-child (). Abbiamo spiegato come funziona con il numero dispari di righe e anche con il numero pari di righe e come cambia il colore usando la proprietà di sfondo. In questa guida, abbiamo usato il selettore di nth-child () e applicato diversi colori alle righe alternative e abbiamo spiegato ogni codice in dettaglio. Abbiamo fornito l'HTML e il codice CSS insieme al rispettivo output.