Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home CSS

CSS: Efecto cebrado en tablas y listas

20 febrero, 2011
en CSS
0
Reglas CSS por defecto para los navegadores
Share on FacebookShare on Twitter

Vamos ver como colorear de forma de alterna los colores de filas de una tabla, listas, etc… pero utilizando solo CSS. Esto mismo se puede hacer tanto con javascript o con php de una manera un poco mas detallada. En css tenemos el selector nth-child que con los atributos even y odd podemos crear un efecto cebreado en una tabla muy facilmente. Un ejemplo a todos los tr de una tabla:

tr:nth-child(even) { background: #ddd }
tr:nth-child(odd) { background: #fff}

Aquí puedes ver un ejemplo

Visto lo anterior podemos preguntar si es posible otra forma de dar color. De hecho, CSS no sólo permite alternar entre pares e impares, sino también según intervalos arbitrarios. Las palabras claves «even» y «odd» no son más que abreviaturas de conveniencia. Por ejemplo, con una lista larga podríamos hacer esto:

li:nth-child(5n+3) {font-weight: bold}

Lo que quiere decir que cada quinto elemento contando a partir del tercero aparecerá en negrita. Dicho de otro modo, estarán en negrita los elementos con la numeración 3, 8, 13, 18, 23, etc.

Veamos el ejemplo

Etiquetas: cssevenimparnth-childoddpar
ANUNCIO
Post anterior

Resetear un archivo CSS

Próximo Post

CSS: Textos con sombra, contornos, …

Otros Posts

Reglas CSS por defecto para los navegadores

Selectores y propiedades más usadas en CSS3

10 febrero, 2016
1

Los selectores son lo que definen sobre qué elementos se aplican las reglas. Pueden ser una combinación de: Nombre de etiquetas HTML Nombres de clases, precedidos por carácter “.” Identificador de elemento, precedido por carácter...

Novedades con Bootstrap 3

Novedades con Bootstrap 3

28 octubre, 2013
0

Com ya sabemos, Bootstrap es una herramienta con un montón de funciones de HTML y CSS que te permitirán usar muchas de sus novedades, ya que te dará tipografía estilizada, botones, formularios, tablas, navegación, y...

Recomendados

Como acceder a la administración de WordPress

Avisar a los usuarios de tu blog cuando publiques algo

3 noviembre, 2013
Como aprovechar la Long Tail en tu tienda online

Como aprovechar la Long Tail en tu tienda online

29 octubre, 2019
Como acceder a la administración de WordPress

WordPress 3.3.1, actualización de seguridad

8 enero, 2012
Formación: Google Webmaster Academy

Formación: Google Webmaster Academy

29 mayo, 2012

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .