Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
:first-of-type
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
ACSSpseudo-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 itemExemplos
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 oseletor 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 |