Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

:only-child

Não entendi o uso do only-child. Que exemplo caracterizaria essa pseudoclasse?

2 respostas

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.

solução!

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:

  • Teste 1
  • Espero ter ajudado, abraço.