Qual a diferença de only-child e only-of-type?
Solucionado
Qual a diferença de only-child e only-of-type?
Oi, Vanessa, tudo bem?
:only-of-type - representa qualquer elemento que não possui irmãos de um determinado tipo
Segue um exemplo do :only-of-type:
<!DOCTYPE html>
<html>
<head>
<style>
p:only-of-type {
background: red;
}
</style>
</head>
<body>
<div><p>Este é uma frase.</p></div> <-- o estilos será aplicado nessa linha
<div><p>Este é uma frase.</p><p>Este é uma frase.</p></div>
</body>
</html>O resultado será que somente a prmeira div com a tagp, já que elemento p não tem um irmão, como na segunda div que há duas tags p, ou seja, irmãs.
: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.
Nesse exemplo, parecido com o anterior, a pseudo-classe only-childaplica a cor vermelha para o elemento que não tenha nenhum irmão, mas esse irmão não precisa ser de um tipo especifico, como na pseudo classe anterior.
<!DOCTYPE html>
<html>
<head>
<style>
p:only-child {
background: red;
}
</style>
</head>
<body>
<div><p>Este é uma frase.</p></div> <-- Estilo aplicado aqui
<div><span>Este é uma frase.</span><p>Este é uma frase.</p></div>
</body>
</html>Qualquer dúvida é só falar!
Entendi. Obrigada!