CSS Selectors: nth-of-type ☝🏼

La pseudoclase nth-of-type nos permite seleccionar elementos de acuerdo al tipo de elemento que queremos elegir.

Por ejemplo, teniendo este HTML:

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <p>Aquí hay un párrafo</p>
    <li>Elemento 3</li>
    <li>Elemento 4</li>
</ul>

Si quisiéramos pintar nuestro elemento 3, si lo hiciéramos mediante nth-child no nos funcionaría:

li:nth-child(3) {
    background-color: green;
}

¿Por qué sucede esto? Porque estamos diciendo que queremos seleccionar nuestro elemento hijo 3, pero como esa posición ahora la ocupa un <p> entonces no tiene qué elegir.

Acá es donde nth-of-type nos es útil, ya que sí podemos indicarle qué tipo de elemento seleccionar:

li:nth-of-type(3) {
    background-color: green;
}

Compatibilidad con navegadores

Haciendo una pequeña visita a caniuse.com podemos ver su compatibilidad con navegadores:

Seguimos viendo el poder de los selectores en CSS. Más info acá 👇🏼

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type