:first-of-type

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! (en-US)

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