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
La definición de ':nth-of-type' en esta especificación.
Working Draft Sin cambios
Selectors Level 3
La definición de ':nth-of-type' en esta especificación.
Recommendation Definición inicial

Compatibilidad en navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,