:nth-of-type

Resumen

La pseudo-clase CSS :nth-of-type(an+b) selecciona, en el árbol del documento, el elemento que tiene an+b-1 hermanos con el mismo nombre de elemento situados antes que él, para un n con valor positivo o cero, y que tiene un elemento padre. Ver :nth-child para una descripción más detallada de la sintaxis de los argumentos de esta pseudo-clase.
:nth-of-type(an+b) es un pseudo-selector más flexible y útil si quiere asegurarse de seleccionar el mismo tipo de etiqueta, sin importar donde está situada dentro de su elemento padre, o que otro tipo de etiquetas aparecen antes de ella.

Sintaxis

element:nth-of-type(an + b) { propiedades de estilo }

Ejemplo

El siguiente ejemplo provoca que la alineación del texto de los párrafos se alterne entre izquierda y derecha.

Contenido CSS

p:nth-of-type(2n+1) { text-align: left; }
p:nth-of-type(2n) { text-align: right; }

Contenido HTML

<div>
    <p>Primer párrafo (alineado a la izquierda)</p>
    <p>Segundo párrafo (alineado a la derecha)</p>
    <p>Tercer párrafo (alineado a la izquierda)</p>
</div>

Especificaciones

Especificación Estado Comentarios
Selectors Level 4
The definition of ':nth-of-type' in that specification.
Working Draft Sin cambios
Selectors Level 3
The definition of ':nth-of-type' in that specification.
Recommendation Definición inicial

Compatibilidad en navegadores

Soporte Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 1.0 3.5 (1.9.1) 9.0 9.5 3.1
Soporte 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

Ver más

Etiquetas y colaboradores del documento

 Colaboradores en esta página: edkalel
 Última actualización por: edkalel,