Foros del Web » Creando para Internet » CSS »

Alternar backgrounds

Estas en el tema de Alternar backgrounds en el foro de CSS en Foros del Web. Hola, bueno quisiera saber como hacer para alternar backgrounds entre 3 colores, por ejemplo: Recibo de la DB 10 consultas y el div serías así: ...
  #1 (permalink)  
Antiguo 07/12/2013, 14:34
 
Fecha de Ingreso: julio-2013
Mensajes: 39
Antigüedad: 10 años, 8 meses
Puntos: 0
Alternar backgrounds

Hola, bueno quisiera saber como hacer para alternar backgrounds entre 3 colores, por ejemplo:

Recibo de la DB 10 consultas y el div serías así:
<div class="fondo_caja">Usuario 1</div>

Quisiera que el primero muestre background rojo, el segundo background verde y el tercero background morado y el cuarto vuelva a mostrar rojo y así, algo así como en SMF

Última edición por DiegoAlonso; 07/12/2013 a las 14:35 Razón: mal escrito el titulo
  #2 (permalink)  
Antiguo 08/12/2013, 11:03
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años, 1 mes
Puntos: 36
Respuesta: Alternar backgrounds

osea quires que cada uno de los registros tenga un color distinto ?
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #3 (permalink)  
Antiguo 08/12/2013, 11:44
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Alternar backgrounds

No te hace falta PHP, te basta con hacerlo con CSS usando nth-child():

Código CSS:
Ver original
  1. .fondo_caja:nth-child(3n+1) {
  2.   background: firebrick;
  3. }
  4.  
  5. .fondo_caja:nth-child(3n+2) {
  6.   background: green;
  7. }
  8.  
  9. .fondo_caja:nth-child(3n+3) {
  10.   background: purple;
  11. }

También puedes usar nth-of-type() si el contenedor padre contiene otros elementos que no sean div.fondo_caja.

Etiquetas: php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:25.