DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
16-07-2013

La pseudo-clase nth-child en CSS permite seleccionar elementos dentro de una lista de etiquetas consecutivas o no consecutivas; puede ser usada para seleccionar cualquiera de los elementos del DOM como contenedores (div), listas, párrafos, etc, que se encuentren a lo largo del documento, lo único que necesitas especificar es el valor de 'n'; a continuación veamos una serie de ejemplos para comprender cómo funciona la pseudo-class nth-child en CSS.

La pseudo-clase nth-child en CSS para seleccionar dos elementos

Para la siguiente lista:

<ul>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
<li>Cuarto</li>
<li>Quinto</li>
<li>Sexto</li>
<li>Séptimo</li>
</ul>

Aplicaremos la siguiente regla CSS usando la pseudo-clase nth-child en CSS para cambiar el color de fondo (background) por un gris oscuro al primer y tercer elemento:

ul.nth_numerica li:nth-child(1), 
ul.nth_numerica li:nth-child(3) {
    background: #999;
}

Aplicada la regla anterior obtenemos el siguiente resultado:

¿Qué es lo que ha pasado?

Simplemente definimos valores numérico a 'n', para indicar la posiciones de los elementos que queremos seleccionar para aplicar la regla anterior; para este ejemplo 'n' tuvo los valores de uno (nth-child(1)) y tres (nth-child(1)) respectivamente.

La pseudo-clase nth-child en CSS para seleccionar elementos impares

¿Qué pasa si quieres algo un poco más genérico?, es decir si quieres aplicar ciertas reglas a los elementos impares comenzando a contar desde uno, por ejemplos a los elementos 1,3,5,7 ... n y sin seleccionar uno a uno los elementos.

Para la siguiente lista:

<ul class="nth_formula">
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
<li>Cuarto</li>
<li>Quinto</li>
<li>Sexto</li>
<li>Séptimo</li>
<li>Octavo</li>
<li>Noveno</li>
<li>Décimo</li>
<li>Undécimo</li>
<li>Duodécimo</li>
<li>Decimotercero</li>
<li>Decimoquinto</li>
<li>Decimosexto</li>
<li>Decimoséptimo</li>
</ul>

Aplicaremos la siguiente regla CSS:

ul.nth_formula li:nth-child(2n+1) {
    background: #999;
}

Como resultado tendremos:

¿Qué es lo que a pasado?

La fórmula 2n+1 (donde para este ejemplo x=2 y k=1) tiene como equivalente en algún lenguaje de programación a:

for(i = k; i 

La pseudo-clase nth-child en CSS y los valores odd y even

Veamos un último ejemplo, un poco más interesante y muy utilizado; para la siguiente tabla:

<table class="alternar">
	<tr>
		<td>Celda 1 1<td>
		<td>Celda 1 2<td>
	</tr>
	<tr>
		<td>Celda 2 1<td>
		<td>Celda 2 2<td>
	</tr>
	<tr>
		<td>Celda 3 1<td>
		<td>Celda 3 2<td>
	</tr>
</table>

aplicaremos las siguientes reglas:

table.alternar tr:nth-child(odd) {
    background: #999;
}
table.alternar tr:nth-child(even) {
    background: #CCC;
}

Que igualmente permiten cambiar el color de fondo de algún elemento, en este caso, de cada una de las celdas.

El resultado es el siguiente:

Celda 1 1 Celda 1 2
Celda 2 1 Celda 2 2
Celda 3 1 Celda 3 2

Las dos palabras nos indican en qué elementos del DOM va a aplicar dicha regla; para los impares(odd) el color de fondo es #999 y para los elementos pares(even) es #CCC.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Sistema sola con CSS

Sistema sola con CSS

Loader espiral con CSS

Loader espiral con CSS

Loader variados con CSS

Loader variados con CSS

Algunos artículos que te pueden interesar

Truco para los bordes en CSS: Bordes transparentes

Truco para los bordes en CSS: Bordes transparentes

En esta entrada veremos un pequeño truco que permite que los bordes de los contenedores de nuestros elementos HTML; se vean transparentes.

Andrés Cruz 22-01-2015

Construyendo nuestro propio logo Android con SVG en HTML

Construyendo nuestro propio logo Android con SVG en HTML

En esta entrada abordaremos un tema un poco más práctico y veremos cómo construir nuestro propio logo de Android empleando lo hablado hasta el momento.

Andrés Cruz 21-05-2015

Truco CSS: Construir flechas en los contenedores HTML

Truco CSS: Construir flechas en los contenedores HTML

En esta entrada explicaremos como crear contenedores con flechas o contenedores con una una bifurcación que le colocamos en el mismo.

Andrés Cruz 04-06-2015