Pseudo-classe | Front-end

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!