O :first-childseletor permite que você direcione o primeiro elemento imediatamente dentro de outro elemento. É definido nas especificações dos seletores CSS de nível 3 como uma “pseudoclasse estrutural”, o que significa que é usado para estilizar o conteúdo com base em seu relacionamento com o conteúdo pai e irmão.
Suponha que temos um artigo e queremos tornar o primeiro parágrafo maior - como uma “lede”, ou parte do texto introdutório:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Em vez de dar uma classe (por exemplo .first), podemos usar :first-childpara selecioná-lo:
p:first-child ( font-size: 1.5em; )Usar :first-childé muito semelhante a, :first-of-typemas com uma diferença crítica: é menos específico. :first-childirá apenas tentar corresponder ao primeiro filho imediato de um elemento pai, enquanto first-of-typeirá corresponder à primeira ocorrência de um elemento especificado, mesmo se não vier absolutamente primeiro no HTML. No exemplo acima, o resultado seria o mesmo, apenas porque o primeiro filho de articletambém passa a ser o primeiro pelemento. Isso revela o poder de :first-child: ele pode identificar um elemento em relação a todos os seus irmãos, não apenas irmãos do mesmo tipo.
O exemplo mais completo abaixo demonstra o uso de :first-childe um seletor de pseudo-classe relacionado :last-child,.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nenhum | 3,2+ | Nenhum | 9,5+ | 9+ | Nenhum | Nenhum |
:first-childfoi introduzido no Módulo 3 dos seletores CSS, o que significa que as versões antigas dos navegadores não o suportam. No entanto, o suporte do navegador moderno é impecável, e os novos pseudo-seletores são amplamente usados em ambientes de produção. Se você precisar de suporte a um navegador mais antigo, use polyfill para IE ou use esses seletores de maneiras não críticas à melhoria progressiva, que é recomendada.