Pseudoklasa CSS :only-child

Pseudoklasa CSS :only-child wybiera elementy, które nie mają elementów siostrzanych, tzn. są jedynym dzieckiem swojego rodzica.

Istnieje podobna pseudoklasa o nazwie :only-of-type, która wybiera element, jeśli jest on jedynym dzieckiem określonego typu swojego rodzica.

Przykład użycia :only-child

W tym przykładzie pseudoklasa :only-child wybrałaby tylko element p, ponieważ jest on jedynym dzieckiem elementu aside. Natomiast ani element span, ani strong nie jest jedynym dzieckiem elementu p, więc żaden z nich nie zostanie wybrany.

<style>
  div :only-child {color: red}
</style>
…
<aside>
  <p>
    <span>Akapit</span>  ciekawego <span>tekstu</span>, który jest  <strong>ważny</strong>.
  </p>
</aside>

Składnia :only-child

Składnia pseudoklasy :only-child:

:only-child {...}