El :first-of-typeselector en CSS le permite apuntar a la primera aparición de un elemento dentro de su contenedor. Se define en la especificación CSS Selectors Level 3 como una "pseudoclase estructural", lo que significa que se utiliza para diseñar contenido en función de su relación con el contenido principal y hermano.
Supongamos que tenemos un artículo con un título y varios párrafos:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Queremos agrandar el primer párrafo, como una especie de "lede" o párrafo introductorio. En lugar de darle una clase, podemos usar :first-of-typepara seleccionarlo:
p:first-of-type ( font-size: 1.25em; )El uso :first-of-typees muy similar :nth-childpero con una diferencia fundamental: es menos específico. En el ejemplo anterior, si lo hubiéramos utilizado p:nth-child(1), no pasaría nada porque el párrafo no es el primer hijo de su padre (el ). Esto revela el poder de :first-of-type: apunta a un tipo particular de elemento en un arreglo particular con relación a hermanos similares, no a todos los hermanos.
El ejemplo más completo a continuación demuestra el uso de :first-of-typey un selector pseudo-clase relacionada, :last-of-type.
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Trabajos | 3.2+ | Trabajos | 9.5+ | 9+ | Trabajos | Trabajos |
:first-of-typese introdujo en CSS Selectors Module 3, lo que significa que las versiones antiguas de los navegadores no lo admiten. Sin embargo, la compatibilidad con los navegadores modernos es impecable y los nuevos pseudo-selectores se utilizan ampliamente en entornos de producción. Si necesita compatibilidad con un navegador más antiguo, ya sea polyfill para IE o utilice estos selectores de formas no críticas, como la mejora progresiva, que se recomienda.