mozilla
Los resultados de tu búsqueda

    :nth-child

    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: tuxtitlan, teoli
    Última actualización por: teoli,