CSS pseudo-classe :first-of-type representa o primeiro elemento de seu tipo entre os filhos de seu elemento pai.

/* Seleciona qualquer <p> que seja o primeiro elemento
   desse tipo entre seus irmãos */
p:first-of-type {
  color: red;
}

Nota: Originalmente definido, o elemento selecionado tinha que ter um pai. Desde o Seletores Nível 4, isso não é mais necessário.

Sintaxe

:first-of-type

Exemplos

Estilizando o primeiro parágrafo

HTML

<h2>Título</h2>
<p>Parágrafo 1</p>
<p>Parágrafo 2</p>

CSS

p:first-of-type {
  color: red;
  font-style: italic;
}

Resultado

Elementos aninhados

Este exemplo mostra como os elementos aninhados também podem ser estilizados. Note que o seletor universal (*) está implícito quando nenhum seletor simples está escrito.

HTML

<article>
  <div>Esta `div` é a primeira!</div>
  <div>Esta <span>`span` aninhada é a primeira</span>!</div>
  <div>Este <em>`em` aninhado é o primeiro</em>, mas este <em>`em` aninhado é o último</em>!</div>
  <div>Este <span>`span` aninhado pegou o estilo</span>!</div>
  <b>Este `b` qualifica!</b>
  <div>Esta é a `div` final.</div>
</article>

CSS

article :first-of-type {
  background-color: pink;
}

Resultado

Especificações

Specification Status Comment
Selectors Level 4
The definition of ':first-of-type' in that specification.
Rascunho atual Os elementos correspondentes não são necessários para ter um pai.
Selectors Level 3
The definition of ':first-of-type' in that specification.
Recomendação Definição inicial.

Compatibilidade de navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Recurso Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 1.0 (Yes) 3.5 (1.9.1) 9.0 9.5 3.2
Recurso Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico 2.1 (Yes) 1.0 (1.9.1) 9.0 10.0 3.2

Veja também

Etiquetas do documento e colaboradores

Etiquetas: 
Colaboradores desta página: marcosnakamine, dbiazioli
Última atualização por: marcosnakamine,