El :first-childselector le permite apuntar al primer elemento inmediatamente dentro de otro elemento. 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 y queremos agrandar el primer párrafo, como un "lede" o un fragmento de texto introductorio:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
En lugar de darle una clase (por ejemplo .first), podemos usar :first-childpara seleccionarlo:
p:first-child ( font-size: 1.5em; )El uso :first-childes muy similar :first-of-typepero con una diferencia fundamental: es menos específico. :first-childsolo intentará hacer coincidir el primer hijo inmediato de un elemento principal, mientras first-of-typeque coincidirá con la primera aparición de un elemento especificado, incluso si no aparece absolutamente primero en el HTML. En el ejemplo anterior, el resultado sería el mismo, solo porque el primer hijo de articletambién es el primer pelemento. Esto revela el poder de :first-child: puede identificar un elemento con relación a todos sus hermanos, no solo a los hermanos del mismo tipo.
El ejemplo más completo a continuación demuestra el uso de :first-childy un selector pseudo-clase relacionada, :last-child.
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Alguna | 3.2+ | Alguna | 9.5+ | 9+ | Alguna | Alguna |
:first-childse 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.