Listas con colores alternados con PHP, XHTML y CSS

Estoy desarrollando un script muy sencillo en PHP que permitirá agregar y listar feeds de forma muy simple en cualquier página. Como parte del diseño visual quise implementar la posibilidad de alternar un color por item para dar claridad y contraste en las listas de elementos de los feeds. La solución es simple y en un par de pasos se puede tener listas con un poco más de estilo.

¿Como dar un estilo para cada elemento?

Solo es necesario aplicar una clase para los elementos impares (1, 3, 5, 7, 9, 11, etc) y otra clase distinta para los elementos pares (2, 4, 6, 8, 10, etc)

En el caso de que uno genere las listas en forma manual es simple ya que solo debemos agregar la clase que corresponde a cada elemento, pero cuando las listas se generan a través de un script es más complicado ya que el mismo deberá encargarse de discriminar que clase aplicar, entonces el script deberá reconocer si el número del elemento de la lista es o no par.

¿Pero como saber si un número es o no par?

Aritméticamente en una división existe un Dividendo (número que se va dividir), Divisor (número que divide a otro), Cociente (resultado de una división) y el Residuo (número que sobra de la división). Cuando una división es exacta, el residuo es cero. Si se divide un número por dos y el residuo es cero, significa que la división es exacta y por lo tanto el número es par.

¿Como se obtiene el residuo de una división?

En PHP existe el operador matemático %, que obtiene el residuo de una división.

Ejemplos:

8 % 2 = 0 | Residuo cero, división exacta, número par

9 % 2 = 1 | Residuo uno, división inexacta, número impar


¿Como reconocemos los elementos?

Para reconocer si un elemento de la lista es par o impar primero debemos crear un contador dentro de un ciclo para contar la cantidad de elementos y determinar si son o no elementos pares.


<ul>
<?php $total = 10; /* cantidad total de elementos */ ?>
<?php for ($x = 0; $x < $total; $x++) { ?>
<li class="<?php if ($x%2==0) { echo "par"; } else { echo "impar"; } ?>">Elemento < ?= $x?></li>
<?php } ?>
</ul>


Esto generaría lo siguiente:

<ul>
<li class="par">Elemento 0</li>
<li class="impar">Elemento 1</li>
<li class="par">Elemento 2</li>
<li class="impar">Elemento 3</li>
<li class="par">Elemento 4</li>
<li class="impar">Elemento 5</li>
<li class="par">Elemento 6</li>
<li class="impar">Elemento 7</li>
<li class="par">Elemento 8</li>
<li class="impar">Elemento 9</li>
</ul>


Con esto ya se ha asignado una clase para los elementos pares y otra para los impares, y solo falta darle el estilo que uno quiera con CSS. En este caso solo aplicaremos un color suave de fondo para la class .par.


.par {
background-color:#F1F5FA;
}


Se puede aplicar el estilo que uno quiera, usando imágenes, colores, decoraciones de texto, etc. eso queda en el gusto y la imaginación de cada uno.

Este podría ser el resultado de una lista con colores alternados.