No entiendo muy bien lo que quieres hacer ya que tendrías que nombrar las clases que vas a usar según el rango. Pero te voy a dar una buena opcion dado lo comprendido.
Digamos que se te genera un HTML de la siguiente forma. Por cierto yo usaría
br en vez de un
div para el clear.
Código HTML:
<div class="style">Producto 1</div>
<div class="style">Producto 2</div>
<div class="style">Producto 3</div>
<br class="clear">
<div class="style">Producto 4</div>
<div class="style">Producto 5</div>
<div class="style">Producto 6</div>
<br class="clear">
<div class="style">Producto 7</div>
<div class="style">Producto 8</div>
<div class="style">Producto 9</div>
<br class="clear">
Ya generado esto puedes usar CSS3 para arreglar la clase
style según los multiplos desde su index con el selector
:nth-child().
Código CSS:
Ver original/* Global, afecta a todos los div con la clase style */
.style{
background-color:red;
}
/* Afecta a todos los div multiplos de 3 iniciando en 0 (1 en numeración real) */
.style:nth-child(3n+0){
background-color:green;
}
/* Afecta a todos los div multiplos de 3 iniciando en 7 (6 en numeración real) */
.style:nth-child(3n+7){
background-color:blue;
}
Esto es muy poderoso pero lamentablemente es para navegadores modernos y no sirve en internet explorer. Sin embargo tenemos javascript para solucionar el problema y quitarnos ese dolor de cabeza. Claro usando
jQuery y
Selectivizr . Que solo al llamarlas a la página, activan pseudo-clases css3 en navegadores no soportados.
Descargas
Selectivizr y la libreria que uses, la mas popular jQuery y las llamas en tu header.
Código HTML:
<script type="text/javascript" src="js/jquery.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/selectivizr.js"></script>
<![endif]-->
Con tan solo colocar esto el arreglo del CSS funcionará correctamente, no hay necesidad de crear funciones extras ni hacer nada engorroso con plugins o algo así.
Yo te aconsejo que trabajes esto de este metodo y no desde el servidor osea PHP. Es una buena practica dejar lo que es del DOM para que se trabaje allá mismo, osea lo de CSS con CSS y lo de javascript con javascript.
No tienes necesidad de crear varias clases porque por ejemplo podrias con PHP hacer un array con las clases ejemplo, style_1, style_2 ... style_10 y según el multiplo adicionarla con condicionales, incluso un switch serviria para eso. Pero esto si tu deseas cambiar a futuro te generaría problemas, en cambio con el CSS no necesitas hacer nada mas engorroso a futuro y preocuparte por los nombres del estilo.
Espero hayas comprendido esta parte, puedes probar todo esto y generar consultas si lo deseas. Incluso yo adicionaría el
clear con CSS o jQuery también.
Saludos!