A pseudo-classe de CSS :only-child representa um elemento sem nenhum elemento-irmão. É o mesmo que :first-child:last-child ou :nth-child(1):nth-last-child(1), mas com uma especificidade mais baixa.
/* Seleciona cada <p>, mas apenas se for o */
/* único filho de seu elemento-pai */
p:only-child {
background-color: lime;
}
Nota: Originalmente, foi definido que o elemento selecionado deveria ter um elemento-pai. A partir de Selectors Level 4, isso não é mais necessário.
Sintaxe
:only-child
Exemplos
Exemplo básico
HTML
<main>
<div>
<i>Eu sou um filho único solitário.</i>
</div>
<div>
<i>Eu tenho irmãos.</i><br>
<b>Eu também!</b><br>
<span>Eu também tenho irmãos, <span>mas este é um filho único.</span></span>
</div>
</main>
CSS
main :only-child {
color: red;
}
Resultado
Exemplo de lista
HTML
<ol>
<li>Primeiro
<ul>
<li>Essa lista tem apenas um elemento.
</ul>
</li>
<li>Segundo
<ul>
<li>Essa lista tem três elementos.
<li>Essa lista tem três elementos.
<li>Essa lista tem três elementos.
</ul>
</li>
<ol>
CSS
li li {
list-style-type: disc;
}
li:only-child {
color: red;
list-style-type: square;
}
Resultado
Especificações
| Especificação | Status | Comentário |
|---|---|---|
| Selectors Level 4 The definition of ':only-child' in that specification. |
Rascunho atual | Não é necessário que os elementos selecionados tenham um elemento-pai. |
| Selectors Level 3 The definition of ':only-child' in that specification. |
Recomendação | Definição inicial. |
Compatibilidade de browser
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| Funcionalidade | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Suporte básico | 2 | (Yes) | 1.5 (1.8) | 9 | 9.5 | 3.1 |
| Elemento-pai não é necessário | 57 | ? | ? | ? | 44 | ? |
| Funcionalidade | Android Webview | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Suporte básico | (Yes) | (Yes) | (Yes) | 1.0 (1.8) | 9 | 10 | 3.1 |
| Elemento-pai não é necessário | 57 | 57 | ? | ? | ? | 44 | ? |