Não entendi o uso do only-child. Que exemplo caracterizaria essa pseudoclasse?
Não entendi o uso do only-child. Que exemplo caracterizaria essa pseudoclasse?
Olá André.
Esta pseudoclasse pode ser usada em situações onde temos um único filho dentro de um objeto pai. Por exemplo:
<body>
<div>
<p>Isto é o primeiro parágrafo.</p>
</div>
<div>
<span>Isto é um span.</span>
<p>Isto é o segundo parágrafo.</p>
</div>
<p>
<b>
Note:
</b>
Isto é o terceiro parágrafo, o Internet Explorer 8 e versões mais antigas não tem suporte para o seletor :only-child.
</p>
</body>
Neste caso podemos apontar a CSS para o primeiro paragrafo, utilizando a seguinte notação:
<style>
p:only-child {
background: red;
}
</style>
Pois somente ele é filho único, no segundo parágrafo ele possui um irmão, e no terceiro parágrafo ele é o pai dos outros elementos.
Ele é similar aos pseudo-elementos :first-child:last-child ou :nth-child(1):nth-last-child(1). Mas sua especificação é apontar somente um filho único.
Por exemplo:
No codigo abaixo eu selecionaria somente o <li>
sozinho...
<ul>
<li>
<ul><li>Teste 1</li></ul>
</li>
<li>
<ul>
<li>Teste2</li>
<li>Teste3</li>
</ul>
</li>
li:only-child{
color: green
}
Iria modificar somente o:
Espero ter ajudado, abraço.