CSS :only-child Pseudo Classe
Use a pseudo-classe CSS :only-child para selecionar e estilizar o único filho de um pai. Leia sobre a pseudo-classe e pratique com exemplos.
A pseudo-classe :only-child corresponde a um elemento que é o único filho do seu pai — ou seja, um elemento que não tem nenhum irmão.
O elemento é selecionado apenas se o seu pai não contiver nenhum outro filho elemento. A pseudo-classe :only-child é funcionalmente equivalente a :first-child:last-child (ser ao mesmo tempo o primeiro e o último filho significa que não há mais nada entre eles), e possui a mesma especificidade de (0,2,0), pois conta como duas pseudo-classes.
Esta página aborda o que :only-child corresponde, como ela difere de seletores relacionados como :only-of-type, como usá-la em layouts reais e as armadilhas que costumam confundir as pessoas.
Quando usar :only-child
:only-child é mais útil quando você deseja que um elemento tenha aparência diferente dependendo de se ele está sozinho ou entre irmãos. Casos comuns:
- Listas com um único item. Estilize uma lista de um item de forma diferente (por exemplo, ocultar um marcador ou remover um separador que só faz sentido quando há vários itens).
- Layouts de card ou grid. Um card sozinho pode ser centralizado ou expandido, enquanto dois ou mais mudam para um layout de múltiplas colunas.
- Conteúdo gerado. Quando a marcação é produzida por um CMS ou um loop de template, muitas vezes não é possível saber com antecedência quantos irmãos aparecerão;
:only-childpermite que a folha de estilos reaja a isso automaticamente.
Como ela difere de :only-of-type
Este é o ponto de confusão mais comum:
:only-child— corresponde apenas quando o elemento é o único filho do seu pai, independentemente do tipo de elemento. Se houver qualquer outro irmão elemento, ele não corresponde.:only-of-type— corresponde quando o elemento é o único do seu tipo entre seus irmãos, mesmo que existam irmãos de outros tipos.
<div>
<h2>Heading</h2>
<p>Only paragraph here</p>
</div>Na marcação acima, o <p> não é um :only-child (o <h2> também é um filho), mas é :only-of-type, porque é o único <p>.
O conteúdo de texto não conta
:only-child analisa apenas irmãos elemento. O texto simples ao redor de um elemento não impede que ele corresponda:
<p>Some text <strong>bold</strong> more text</p>Aqui <strong> ainda corresponde a strong:only-child, porque os nós de texto ao redor não são elementos. Espaços em branco e comentários são igualmente ignorados.
Versão
Sintaxe
Sintaxe CSS :only-child
:only-child {
css declarations;
}Exemplo do seletor :only-child:
Exemplo de :only-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:only-child {
background: #1c87c9;
}
</style>
</head>
<body>
<h2>:only-child selector example</h2>
<div>
<p>Lorem ipsum is simply dumnmy text.</p>
</div>
<div>
<p>Lorem ipsum is simply dummy text.</p>
<p>Lorem ipsum is simply dummy text.</p>
</div>
</body>
</html>Exemplo do seletor :only-child para a tag <li>:
Exemplo de :only-child com a tag li
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul li {
list-style-type: square;
}
li:only-child {
color: blue;
list-style-type: disc;
}
</style>
</head>
<body>
<h2>:only-child selector example</h2>
<ol>
<li>
One element
<ul>
<li>This list has just one element.</li>
</ul>
</li>
<li>
Two elements
<ul>
<li>This list has two elements.</li>
<li>This list has two elements.</li>
</ul>
</li>
<li>
Three elements
<ul>
<li>This list has three elements.</li>
<li>This list has three elements.</li>
<li>This list has three elements.</li>
</ul>
</li>
</ol>
</body>
</html>Exemplo do seletor :only-child para a tag <em>:
Exemplo de :only-child com a tag em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
em:only-child {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>:only-child selector example</h2>
<p>This is a <em>paragraph</em>.</p>
<p>This is a paragraph.</p>
</body>
</html>Exemplo do seletor :only-child para a tag <div>:
Exemplo de :only-child para a tag div
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div:only-child {
color: #8ebf42;
font-weight: bold;
}
div {
display: block;
margin: 6px;
padding: 5px;
outline: 1px solid #1c87c9;
}
div div {
display: inline-block;
}
</style>
</head>
<body>
<h2>:only-child selector example</h2>
<div>
<div>I am an only child.</div>
</div>
<div>
<div>I am the 1st sibling.</div>
<div>I am the 2nd sibling.</div>
<div>
I am the 3rd sibling,
<div>but this is an only child.</div>
</div>
</div>
</body>
</html>Seletores relacionados
:only-of-type— o único elemento do seu tipo entre os irmãos.:first-childe:last-child— selecionam o primeiro ou o último filho;:only-childé equivalente a combinar ambos.:nth-child()— corresponde a filhos por posição com uma fórmula.