: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

Compatibilidad en navegadores

Ver más

• :nth-child