CSS :first-of-type Pseudo Classe
A pseudo-classe CSS :first-of-type seleciona o primeiro elemento do seu tipo entre elementos irmãos. Leia sobre ela e experimente exemplos.
A pseudo-classe CSS :first-of-type seleciona um elemento que é o primeiro do seu tipo entre seus irmãos. É equivalente a [:nth-of-type(1)](/learn-css/nth-of-type).
O seletor conta os irmãos pelo nome da tag HTML, e não por classe, atributo ou papel. Para cada tipo de elemento distinto dentro de um elemento pai, exatamente um elemento pode corresponder a :first-of-type — o primeiro daquela tag. Isso significa que um único pai pode ter várias correspondências de :first-of-type ao mesmo tempo (uma por tag), o que é o comportamento que mais frequentemente surpreende quem vem de :first-child.
:first-of-type vs :first-child
O seletor :first-of-type é frequentemente comparado ao :first-child, mas eles diferem em escopo. Enquanto :first-child corresponde a um elemento apenas quando ele é o primeiro filho do seu pai, independentemente do tipo, :first-of-type corresponde ao primeiro irmão de um determinado tipo mesmo quando outros elementos o precedem. Ambos os seletores compartilham a mesma especificidade CSS.
Considere esta marcação:
<div>
<h2>Heading</h2>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>p:first-childnão corresponde a nada — o primeiro filho é o<h2>, não um<p>.p:first-of-typecorresponde ao primeiro<p>("First paragraph"), pois é o primeiro parágrafo entre seus irmãos.
Use :first-of-type quando quiser "o primeiro título", "a primeira lista" ou "o primeiro parágrafo" dentro de um contêiner, independentemente de quais tags o precedem. Recorra a :first-child apenas quando o elemento precisar ser literalmente o filho inicial.
Quando utilizá-lo
Alguns padrões práticos:
- Estilizar o parágrafo introdutório de um artigo sem adicionar uma classe à marcação.
- Remover a margem superior ou borda do primeiro item de um componente repetido (por exemplo, o primeiro
<figure>em uma galeria). - Combiná-lo com
:last-of-typepara remover as bordas externas de uma pilha, ou com:nth-of-type()quando precisar de uma posição diferente da primeira.
Se um pai contiver apenas um elemento de um tipo, esse elemento é ao mesmo tempo seu :first-of-type e seu :only-of-type.
A partir do Selectors Level 4, o elemento selecionado não precisa estritamente de um nó pai no DOM para corresponder.
Versão
Sintaxe
Sintaxe do CSS :first-of-type
:first-of-type {
css declarations;
}Exemplo do seletor :first-of-type:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:first-of-type {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>Exemplo do seletor :first-of-type com a tag <article>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:first-of-type {
font-size: 22px;
color: #777777;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<article>
<h2>This is a title.</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
</article>
</body>
</html>Exemplo do seletor :first-of-type com algumas tags HTML:
Aqui article:first-of-type corresponde apenas ao primeiro <article>, portanto o fundo escuro não é aplicado ao segundo. O seletor tem escopo por pai e por tag, o que o torna ideal para estilizar a primeira instância de um bloco repetido.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin: 0;
}
article:first-of-type {
background-color: #777777;
color: #ffffff;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<article>
<p>This is a first element!</p>
<p>This <em>nested 'em' is first</em>!</p>
<p>This <strong>nested 'strong' is first</strong>, but this <strong>nested 'strong' is last</strong>!</p>
<p>This <span>nested 'span' gets styled</span>!</p>
<q>This is a 'q' element!</q>
<p>This is a last element.</p>
</article>
<article>
<p>This is a second article.</p>
</article>
</body>
</html>Compatibilidade com Navegadores
| Navegador | Versão |
|---|---|
| Chrome | 1.0 |
| Firefox | 1.0 |
| Safari | 1.0 |
| Edge | 12.0 |
| Opera | 7.0 |
| IE | 9.0 |