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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,