Assegnare stili alternati agli elementi HTML con CSS e JQuery

In questo tutorial andremo a vedere come assegnare uno stile CSS ad un elemento HTML che si ripeta in maniera alternata, che sia essa una lista, una tabella, un div o altro, ti potrà essere utile per creare delle tabelle stile “zebra” dove ogni riga o colonna avrà un colore diverso ma potrà avere tantissimi altri tipi di applicazioni.

Demo Download

Per realizzare ciò utilizzeremo diversi metodi, nel primo utilizzeremo la pseudo classe dei CSS :nth-child() che ci permetterà di ottenere il risultato in maniera molto veloce e semplice da capire, il secondo metodo invece vedrà protagonista JQuery per ottenere lo stesso risultato.

:nth-child(N) e la sua sintassi

Questa è una pseudo classe introdotta con i CSS3, al momento è supportata dalle versioni più recenti dei maggiori browser, ma non da IE 8 e inferiori.

La sua sintassi è :nth-child(An+B), dove alla sinistra dei due punti andrà inserito l’elemento HTML che vogliamo colpire con i CSS, A indica il numero crescente dell’elemento che vogliamo andare a colpire per esempio se abbiamo una lista di 6 elementi e volessimo assegnare uno stile al secondo possiamo mettere al posto di A il numero 2, aggiungendo invece la lettera n (che non deve assumere nessun valore) specifichiamo che la regola deve essere replicata ogni tot numero di elementi,B infine indica dopo quanti numeri di elementi vogliamo che inizi a lavorare lo stile, Quindi:

li:nth-child(2n+3) {background-color: #eaeaea;}

vuol dire che, in una ipotetica lista di tag li composta da un certo numero di voci, il valore della proprietà background-color:#eaeaea; verrà assegnato a partire dal terzo elemento della lista e verrà ripetuto ogni due elementi della lista stessa.

Per chiarire meglio di seguito una serie di esempi pratici, ti consiglio di guardare anche la demo funzionante degli esempi in fondo al tutorial.

Assegnare stili alternati alle tabelle

<table cellpadding="0" cellspacing="3" border="0" width="100%">
  <thead>
    <th>Nome</th>
    <th>Valore</th>
  </thead>
  <tbody>
    <tr>
      <th>Nome 1</th>
      <td>Valore</td>
    </tr>
    <tr>
      <th>Nome 2</th>
      <td>Valore</td>
    </tr>
    <tr>
      <th>Nome 3</th>
      <td>Valore</td>
    </tr>
    <tr>
      <th>Nome 4</th>
      <td>Valore</td>
    </tr>
    <tr>
      <th>Nome 5</th>
      <td>Valore</td>
    </tr>
    <tr>
      <th>Nome 6</th>
      <td>Valore</td>
    </tr>
    <tr>
      <th>Nome 7</th>
      <td>Valore</td>
    </tr>
  </tbody>
</table>
tr:nth-child(2n+1)
{
  background:#ffc;
  font-style:italic;
  font-family:georgia;
}
 
tr
{
  background:#cef;
  font-style:normal;
}

Assegnare stili alternati alle liste

<ul>
  <li>Voce della lista 1</li>
  <li>Voce della lista 2</li>
  <li>Voce della lista 3</li>
  <li>Voce della lista 4</li>
  <li>Voce della lista 5</li>
  <li>Voce della lista 6</li>
</ul>
li:nth-child(2n+2)
{
  background:#ffc;
  font-style:italic;
}
 
li
{
  background:#cef;
  font-style:normal;
  list-style:none;
 
}

NOTA: la classe :nth-child() può essere usata non solo per tabelle o liste ma per qualsiasi elemento HTML.

Assegnare stili alternati usando JQuery

Grazie a JQuery possiamo assegnare regole alternate ad una serie di elementi usando diversi metodi, in questo caso voglio mostrarvi come fare uso dei selettori odd e even, grazie ai quali potremo attivare le regole CSS alternate anche su browser come IE 7-8 che non supportano invece la pseudo classe nth-child() vista sopra.

<head>
...
<script src="/jquery.js"></script> // richiamo e attivo la libreria 
...
</head>
<body>
<ul>
<li>Voce della lista 1</li>
<li>Voce della lista 2</li>
<li>Voce della lista 3</li>
<li>Voce della lista 4</li>
</ul>
 
  <script>
   $("li:even").css("background-color", "blue");
   $("li:odd").css("background-color", "red");
  </script>
</body>

In particolare con even assegneremo il colore blu di sfondo partendo dalla prima voce della lista saltando poi di uno in uno, mentre con il selettore odd assegnrememo il colore rosso a partire dal secondo elemento della lista saltando poi di uno in uno.

Info sull' autore:
Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di

1 Risposta per Assegnare stili alternati agli elementi HTML con CSS e JQuery