O :first-of-typeseletor em CSS permite que você direcione a primeira ocorrência de um elemento em seu contêiner. É 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 com um título e vários parágrafos:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Queremos tornar o primeiro parágrafo maior, como uma espécie de “lede” ou parágrafo introdutório. Em vez de dar uma classe, podemos usar :first-of-typepara selecioná-lo:
p:first-of-type ( font-size: 1.25em; )Usar :first-of-typeé muito semelhante a, :nth-childmas com uma diferença crítica: é menos específico. No exemplo acima, se tivéssemos usado p:nth-child(1), nada aconteceria porque o parágrafo não é o primeiro filho de seu pai (o ). Isso revela o poder de :first-of-type: tem como alvo um tipo específico de elemento em um arranjo específico em relação a irmãos semelhantes, nem todos os irmãos.
O exemplo mais completo abaixo demonstra o uso de :first-of-typee um seletor de pseudo-classe relacionado :last-of-type,.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funciona | 3,2+ | Funciona | 9,5+ | 9+ | Funciona | Funciona |
:first-of-typefoi 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.