CSS :only-of-type Pseudo Classe
Use a pseudo-classe CSS :only-of-type para selecionar o único filho de um tipo dentro de um pai. Veja exemplos práticos.
A pseudo-classe CSS :only-of-type corresponde a um elemento que é o único do seu tipo entre os filhos de seu pai. "Tipo" aqui significa o nome da tag (por exemplo, p, img ou h2), não uma classe ou ID.
Portanto, p:only-of-type corresponde a um <p> somente se ele for o único parágrafo dentro do seu pai — mesmo que esse pai também contenha outros elementos como títulos, listas ou imagens.
Esta página explica como :only-of-type funciona, como ele difere de :only-child, e quando cada um é a ferramenta adequada.
Quando usar
:only-of-type é útil quando você deseja estilizar um elemento apenas quando ele está sozinho no seu grupo de irmãos do mesmo tipo. Casos comuns:
- Destacar um parágrafo em um cartão somente quando ele for o único parágrafo ali.
- Adicionar espaçamento extra a uma lista quando ela for a única lista em uma seção.
- Estilizar uma única imagem de forma diferente das imagens que aparecem em uma galeria (múltiplas imagens).
Se o pai receber um segundo elemento do mesmo tipo, a regra deixa de ser aplicada automaticamente — sem necessidade de JavaScript ou classes extras.
:only-of-type vs :only-child
Essas duas pseudo-classes parecem semelhantes, mas respondem a perguntas diferentes:
:only-childcorresponde a um elemento somente se ele não tiver irmãos de nenhum tipo (é o único filho do pai, de qualquer tipo).:only-of-typecorresponde a um elemento se ele não tiver irmãos do mesmo tipo — irmãos de outros tipos são permitidos.
Considere esta marcação:
<div>
<h2>Heading</h2>
<p>Only paragraph.</p>
</div>Aqui o <p> não é um :only-child (o <h2> é um irmão), mas ele é o :only-of-type do tipo p, portanto p:only-of-type o corresponde.
Versão
Sintaxe
Sintaxe CSS :only-of-type
:only-of-type {
css declarations;
}Exemplo do seletor :only-of-type:
Exemplo de código CSS :only-of-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:only-of-type {
background: #1c87c9;
}
</style>
</head>
<body>
<h2>:only-of-type selector example</h2>
<div>
<p>Lorem ipsum is simply dummy text.</p>
</div>
<div>
<p>Lorem ipsum is simply dummy text.</p>
<p>Lorem ipsum is simply dummy text.</p>
</div>
</body>
</html>No exemplo acima, o primeiro <div> contém um único parágrafo, então esse parágrafo recebe o fundo azul. O segundo <div> contém dois parágrafos, portanto nenhum deles corresponde a p:only-of-type e permanecem sem estilo.
Misturando tipos no mesmo pai
Como :only-of-type conta apenas irmãos do mesmo tipo, um pai pode ter vários elementos de tipos diferentes e cada tipo "único" ainda será correspondido:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div :only-of-type {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<h2>The only heading</h2>
<p>The only paragraph.</p>
<span>The only span.</span>
</div>
</body>
</html>Aqui o <h2>, o <p> e o <span> são cada um o único elemento do seu tipo dentro do <div>, então os três são estilizados.
Suporte de navegadores
:only-of-type é suportado em todos os navegadores modernos — Chrome, Firefox, Safari, Edge e Opera. Faz parte do Selectors Level 3, portanto você pode usá-lo sem fallback nos navegadores atuais.
Seletores relacionados
:only-child— corresponde a um elemento sem irmãos de nenhum tipo.:first-of-type— o primeiro elemento do seu tipo entre os irmãos.:last-of-type— o último elemento do seu tipo entre os irmãos.:nth-of-type— seleciona elementos de um tipo por posição.