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
Estamos convertendo nossos dados de compatibilidade para o formato JSON.
Esta tabela de compatibilidade ainda usa o formato antigo,
pois ainda não convertemos os dados que ela contém.
Descubra como você pode ajudar!
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 | ? |