БЛОГ

Использование псевдокласса :only-child

Dec 06, 2014

Перевод статьи «Only You: Using only-child in CSS».

На один шаг выше псевдокласса :empty стоит псевдокласс :only-child, обозначающий элементы, которые находятся в полном одиночестве в своих контейнерах. Вы можете спросить, как его использовать в вашем CSS. На самом деле сценарии использования этого псевдокласса на удивление просты.

Использование only-child для обработки заглавного изображения

Хороший пример использования псевдокласса :only-child можно увидеть прямо на этом блоге (см. блог автора оригинальной статьи), где большинство статей имеют иллюстрацию в <header>. Многие из этих изображений заполняют контейнер от края до края, но только если они являются единственными «обитателями» в <header>.

Традиционное решение заключается в применении класса или указании необходимых свойств прямо в теге:

<article>
  <header>
    <img src="sad-kid.jpg" alt style="width: 100%; height: auto">
  </header>
  …
</article>

Думая о семантике верстки, можно избежать указания свойств в теге <img>, воспользовавшись псевдоклассом :only-child:

header img:only-child { width: 100%; height: auto; }

Это означает: «если изображение — единственный элемент в <header>, его нужно растянуть во всю ширину родительского элемента».

Обратите внимание, что это будет работать, даже если изображение обернуто в <figure> и располагается внутри <header>. С таким описанием свойств элемент <figure> опускается, т.к. он не указан в селекторе: изображение по-прежнему остается «единственным ребенком». Однако если мы добавим элемент <figcaption> на одном уровне с изображением (т.е. непосредственно под или над ним), то указанное свойство больше не будет применяться. Для достижения того же результата в этом случае можно использовать псевдокласс :only-of-type.

Проверяем, есть ли у элемента «родственники»

Хотя CSS не имеет точного представления о количестве элементов на странице (тут власть принадлежит JavaScript), можно гарантировать, что стиль применен к элементу при условии, что этот элемент не один внутри своего родителя.

Например, предположим, что мы хотим задать стиль последнему абзацу в <div> определенным образом, но только, если этот абзац не единственный элемент в родителе. Контент генерируется динамически: т.е. нет никакого способа сказать заранее, сколько абзацев будет содержать <div>.

Но, если мы используем псевдокласс :only-child в сочетании с :not, мы сможем определить, что абзац не один, и задать ему стиль:

div p:last-child:not(:only-child) { font-weight: bolder; }

Используя такой селектор, получим, что последний абзац будет иметь полужирное начертание, но только в случае, если он не единственный элемент внутри <div>. Чтобы быть еще более точными, мы могли бы использовать псевдоклассы :last-of-type и :only-of-type по такой же схеме.

Поддержка

Поддержка псевдокласса :only-child отличная: все современные браузеры полностью его поддерживают, включая IE9+.

Альтернативы

Альтернативные селекторы, выполняющие ту же самую функцию: :first-child:last-child — означает: первый дочерний элемент, который также является и последним; :nth-child(1):nth-last-child(1) — означает то же самое, только с большей специфичностью.

Контактная информация