Псевдокласс only-child выбирает элемент, который является единственным потомком родителя.

Аналогичен использованию :first-child:last-child или :nth-child(1):nth-last-child(1).

Синтаксис

селектор:only-child {
	
}

Примеры

Пример

В данном примере мы сделаем li красного цвета, если он единственный потом родителя ol:

<ol>
	<li>пункт</li>
</ol>
li:only-child {
	color: red;
}

Результат выполнения кода:

  1. пункт

Пример

Посмотрите на разницу между only-child и only-of-type: в данном примере мы ищем h2, который является единственным потомком родителя (h2:only-child) и не находим, так как есть еще потомок - абзац.

h2:only-child {
	color: red;
}

Результат выполнения кода:

Это абзац (первый потомок)

Это h2

А сейчас мы ищем h2, который является единственным h2 в родителе:

h2:only-of-type {
	color: red;
}

Результат выполнения кода:

Это абзац

Это h2