:nth-child

by 2 contributors:

Resumen

La pseudo-clase CSS :nth-child selecciona los elementos hermanos dentro del árbol del DOM, que coincidan con la condicion an+b-1, siendo n un numero natural, y teniendo un elemento padre.

Esto puede ser descrito con mayor claridad de esta manera: el elemento coincidente es el hijo bth  de un elemento donde sus hijos han sido separados en grupos de a elementos cada uno.

Los valores de a y b deben de ser enteros, y el índice del elemento first-child seleccionado debe de ser 1.

Entre otras cosas, esto permite que los selectores coincidan con cada dos filas de una tabla.

Sintaxis

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

Ejemplos

Selectores de ejemplo

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.

Ejemplos de uso

span:nth-child(2n+1)
{
    background-color: lime;
}

...donde...

  <div>
    <span>¡Este span es lima!</span>
    <span>Este span no lo es. :(</span>
    <span>¡Pero este si lo es!</span>
    <span>Con tristeza, este no lo es...</span>
  </div>

... debería verse así ...

   ¡Este span es lima!
   Este span no lo es. :(
   ¡Pero este si lo es!
   Con tristeza este no lo es...

Especificaciones

Especificacion Estado Comentarios
Selectors Level 4 Working Draft Sin cambios.
Selectors Level 3 Recommendation Definición inicial.

Compatibilidad de navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 1.0 3.5 (1.9.1) 9.0 9.5 3.1
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico 2.1 1.0 (1.9.1) 9.0 9.5 3.1

Notas

  • Opera no soporta la inserción dinámica de elementos.

Etiquetas y colaboradores del documento

Contributors to this page: teoli, tuxtitlan
Última actualización por: teoli,