:first-of-type

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

css
/* 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

Error: could not find syntax for this item

Exemplos

Estilizando o primeiro parágrafo

HTML

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

CSS

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

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

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

Resultado

Especificações

Specification
Selectors Level 4
# first-of-type-pseudo

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também