Css3

Tablas, filas de diferentes colores con css

Por : Jhons_1101
2015-09-13
Tags :
El siguiente ejemplo muestra una aplicación práctica de la pseudo-clase nth-child. CSS3 proporciona cuatro poderosas pseudo-clases que permiten al diseñador CSS seleccionar múltiples elementos según su posición en el DOM. La utilización de estas pseudo-clases puede ser un poco confusa al principio, pero es fácil una vez que se ha comprendido su funcionamiento. Las pseudoclases son:

  • :nth-child(N)
  • :nth-last-child(N)
  • :nth-of-type(N)
  • :nth-last-of-type(N)

  • El argumento N, puede ser una palabra clave (even, odd), un número o una expresión numérica ( an + b). Estas pseudo-clases aceptan la palabra clave "odd" para seleccionar elementos pares y "even" para seleccionar elementos impares.
    Si el argumento n es un número, representa la posición ordinal del elemento seleccionado.
    Por ejemplo, si el argumento es 5, se seleccionará el quinto elemento hasta acabar.
    El argumento N también puede darse como an + b, donde a y b son números enteros (por ejemplo, 3n + 1).
    Veamos un ejemplo utilizando "odd" y "even" para dar un estilo distinto a las filas pares e impares de una tabla. Supongamos la siguiente tabla:
    
    <table id="TableColor">
    <tr>
    	<td>IE</td>
    	<td>Download</td>
    </tr>
    <tr>
    	<td>Firefox</td>
    	<td>Download</td>
    </tr>
    <tr>
    	<td>Chrome</td>
    	<td>Download</td>
    </tr>
    <tr>
    	<td>Opera</td>
    	<td>Download</td>
    </tr>
    <tr>
    	<td>Edge</td>
    	<td>Download</td>
    </tr>
    </table>
    
    
    compartir en facebook compartir en Google compartir en Twitter compartir en Blogger compartir como código embebido compartir la url

    Para que las filas tengan un estilo "cebra" o de colores alternos tan sólo necesitaríamos el siguiente CSS:
    
    
    #TableColor tr:nth-child(odd) {
    	background-color: #DDD;
    	color:#777
    }
    
    #TableColor tr:nth-child(even) {
    	background-color: #666;
    	color:#FFF;
    }
    
    

    Sintaxis
    
    elemento:nth-child(an + b) { propiedades-de-estilo }
    
    

    Ejemplos
  • tr:nth-child(2n+1)
  • Representa las filas impares de una tabla HTML.
  • tr:nth-child(odd)
  • Representa las filas impares de una tabla HTML.
  • tr:nth-child(2n)
  • Representa las filas pares de una tabla HTML.
  • tr:nth-child(even)
  • Representa las filas pares de una tabla HTML.
  • span:nth-child(0n+1)
  • Representa un elemento span el cual es el first-child del parent; lo que es lo mismo que el selector :first-child.
  • span:nth-child(1)
  • Equivalente al anterior.
  • span:nth-child(-n+3)
  • Representa a los tres primero elementos span.

    Usando una fórmula (an + b).

    Descripción: a representa un tamaño del ciclo, n es un contador (empieza en 0), y b es un valor de desplazamiento, se va a aplicar el estilos cada número (b) de elementos.

    	
    /* Especifica un color de fondo para todos los elementos "tr" de 
    la tabla "#TableColor" y cuyo índice es un múltiplo de 3 */
    #TableColor tr:nth-child(3n+0) {
    	background: #f2f2f2;
    }
    
    



  • No olvides revisar la sección de pantallazos para que veas el ejemplo.
  • Compatibilidad de navegadores
    Revisar Compatibilidad



    Si este contenido te fue útil, no olvides compartirlo en redes sociales, Considéralo. Puede ser la manera de agradecer!


    Agrega tu comentario...

    Puedes utilizar etiquetas <pre></pre>, <p></p>, <div></div>, + (Nombre usuario, para responderle a alguien)

    FNlZ9vg





    Este post no tiene comentarios, sé el primero en hacerlo
    Esta entrada no cuenta con imágenes adjuntas

    Unete al grupo de whatsApp +57 316 392 6456

    Sigue el grupo en facebook

    Siguenos.....