Image for post
Image for post

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:

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

Image for post
Image for post

¿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:

Image for post
Image for post

Compatibilidad con navegadores

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

Image for post
Image for post

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store