Salta al contingut principal

Tabla con filas de colores alternos unicamente con CSS

Tabla con filas de colores alternos unicamente con CSS:
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, un número o una expresión numérica tipo 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. 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 cdistinto a las filas pares e impares de una tabla. Supongamos la siguiente tabla:
<table id="miTabla">
    <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>Safari</td>
        <td>Download</td>
    </tr>
    <tr>
        <td>Opera</td>
        <td>Download</td>
    </tr>
</table>
Para que las filas tengan un estilo "cebra" o de colores alternos tan sólo necesitaríamos el siguiente CSS:
#miTabla tr:nth-child(odd) {
   background-color: #DDD;
   color:#777
}

#miTabla tr:nth-child(even) {
   background-color: #666;
   color:#FFF;
}
Ver ejemplo en funcionamiento » »
Si el argumento N es dado mediante una expresión an+b, en esa expresión, el número b representa la posición ordinal del primer elemento que queremos hacer coincidir y el número a representa el número ordinal de cada elemento queremos hacer coincidir después de eso. Por ejemplo, la expresión 3n+1 hará coincidir el primer elemento despúes de cada tercer elemento: el primero, cuarto, séptimo, décimo y así sucesivamente. El valor de la palabra clave "odd" (impar) es equivalente a la expresión 2n+1.
Si a y b son iguales, o si b es cero, b puede omitirse. Por ejemplo, las expresiones 3n+3 y 3n+0 equivalen a 3n — se refieren a cada tercer elemento.
La pseudo-clase :nth-last-child busca coincidencias con elementos de acuerdo a sus posiciones dentro de la lista respecto a un elemento padre, empezando a contar desde el final. Es decir, selecciona el enésimo hijo de su elemento padre empezando a contar del último al primero.
Por ejemplo, este selector seleccionará el último párrafo contenido dentro de un elemento con identificador "micaja":
#miCaja p:nth-last-child(1) {

}
La pseudo-clase :nth-of-type busca elementos, del mismo tipo, de acuerdo a sus posiciones respecto a un elemento padre. En este ejemplo se seleccionará la primera imagen dentro de un párrafo:
p img:nth-of-type(1){

}
La pseudo-clase :nth-last-of-type selecciona el enésimo elemento de su tipo, empezando a contar del último al primero. El siguiente ejemplo busca las tres últimas imágenes que se encuentran dentro de un elemento cuyo identificador es "gallery":
#gallery>img:nth-last-of-type(-n+3){

}

Comentaris

Entrades populars d'aquest blog

15 Tutoriales CSS3 para mejorar tus paginas web

15 Tutoriales CSS3 para mejorar tus paginas web : Les dejo una pequeña recopilación de tutoriales CSS3 que espero sean de utilidad para ustedes, intentamos hacer una recopilación bastante completa para crear impresionantes diseños web con CSS3 y aprovechar las bondades de CSS3 incluso para aplicar efectos, son un total de 15 tutoriales CSS3 gratis . Crear menu dropdown con CSS3 Crear breadcrumbs con estilo Transiciones de paginas con CSS3 Crear timeline con CSS3 y jQuery Reproductor de video con HTML5, CSS3 y jQuery Crear efecto acordion CSS3 Aplicar degradado a texto Crear texto en curva con CSS3 y jQuery Aplicar textura a texto con Magic Pill Crear slider de imagenes con CSS3 y jQuery Rotar texto con CSS3 Crear menu vertical con CSS3 Crear formulario con HTML5 y CSS3 Crear efecto de imagenes apiladas con CSS3 Aplicar estilos para imagenes con CSS3  

El meu editor de codi preferit el 2024, que això ja se sap que va canviant 😄

Visual Code Visual Code és un editor de codi font lleuger, però potent que s’executa al teu escriptori i està disponible per a Windows, macOS i Linux. Compta amb suport integrat per a JavaScript, TypeScript i Node.js i té un ric ecosistema d’extensions per a altres llenguatges i entorns d’execució (com C++, C#, Java, Python, PHP, Go, .NET).  És una eina ideal per a desenvolupar i depurar aplicacions web i en el núvol. Per què Visual Code? Visual Code té molts avantatges com a editor de codi font, com per exemple: És gratuït, ràpid i fàcil d’instal·lar i actualitzar. Té un ampli ecosistema d’extensions que et permeten afegir funcionalitats i personalitzar la teva experiència de desenvolupament. Té un suport integrat per a molts llenguatges i entorns d’execució, i et permet depurar i executar el teu codi des del mateix editor. Té una interfície senzilla i elegant, amb diferents temes i modes de visualització. Té un sistema de sincronització de configuracions que et permet guardar les...

Learn Composition from the Photography of Henri Cartier-Bresson

“Do you see it?” This question is a photographic mantra. Myron Barnstone , my mentor, repeats this question every day with the hopes that we do “see it.” This obvious question reminds me that even though I have seen Cartier-Bresson’s prints and read his books, there are major parts of his work which remain hidden from public view. Beneath the surface of perfectly timed snap shots is a design sensibility that is rarely challenged by contemporary photographers. Henri Cartier-Bresson. © Martine Franck Words To Know 1:1.5 Ratio: The 35mm negative measures 36mm x 24mm. Mathematically it can be reduced to a 3:2 ratio. Reduced even further it will be referred to as the 1:1.5 Ratio or the 1.5 Rectangle. Eyes: The frame of an image is created by two vertical lines and two horizontal lines. The intersection of these lines is called an eye. The four corners of a negative can be called the “eyes.” This is extremely important because the diagonals connecting these lines will form the breakdown ...