CSS псевдокласс :only-of-type — Learn CSS

Псевдокласс CSS :only-of-type соответствует элементу, который является единственным элементом своего типа среди дочерних элементов своего родителя. «Тип» здесь означает имя тега (например, p, img или h2), а не класс или ID.

Таким образом, p:only-of-type совпадает с <p> только в том случае, если это единственный абзац внутри его родителя — даже если родитель содержит другие элементы, такие как заголовки, списки или изображения.

На этой странице объясняется, как работает :only-of-type, чем он отличается от :only-child и когда каждый из них является подходящим инструментом.

Когда использовать

:only-of-type удобен, когда нужно стилизовать элемент только в том случае, когда он стоит один среди одноимённых братских элементов. Распространённые случаи:

Выделить абзац в карточке только тогда, когда он является единственным абзацем в ней.
Добавить дополнительные отступы к списку, когда он является единственным списком в разделе.
Стилизовать одиночное изображение иначе, чем изображения в галерее (несколько изображений).

Если родитель получит второй элемент того же типа, правило перестанет применяться автоматически — без JavaScript и дополнительных классов.

`:only-of-type` и `:only-child`

Эти два псевдокласса выглядят похоже, но отвечают на разные вопросы:

:only-child совпадает с элементом только в том случае, если у него нет братских элементов вообще (он является единственным дочерним элементом родителя любого типа).
:only-of-type совпадает с элементом, у которого нет братских элементов того же типа — братские элементы других типов допускаются.

Рассмотрим следующую разметку:

<div>
  <h2>Heading</h2>
  <p>Only paragraph.</p>
</div>

Здесь <p> не является :only-child (у него есть братский элемент <h2>), но он является :only-of-type для типа p, поэтому p:only-of-type совпадает с ним.

Версия

Selectors Level 3

Selectors Level 4

Синтаксис

Синтаксис CSS :only-of-type

:only-of-type {
  css declarations;
}

Пример селектора :only-of-type:

Пример кода CSS :only-of-type

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:only-of-type {
        background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:only-of-type selector example</h2>
    <div>
      <p>Lorem ipsum is simply dummy text.</p>
    </div>
    <div>
      <p>Lorem ipsum is simply dummy text.</p>
      <p>Lorem ipsum is simply dummy text.</p>
    </div>
  </body>
</html>

Попробуйте сами »

В приведённом примере первый <div> содержит один абзац, поэтому он получает синий фон. Второй <div> содержит два абзаца, поэтому ни один из них не соответствует p:only-of-type и они остаются без стилей.

Смешение типов в одном родителе

Поскольку :only-of-type учитывает только братские элементы того же типа, родитель может содержать несколько элементов разных типов, и каждый «единственный» тип по-прежнему будет соответствовать:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div :only-of-type {
        color: #1c87c9;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>The only heading</h2>
      <p>The only paragraph.</p>
      <span>The only span.</span>
    </div>
  </body>
</html>

Здесь <h2>, <p> и <span> — каждый является единственным элементом своего типа внутри <div>, поэтому все три стилизуются.

Поддержка браузерами

:only-of-type поддерживается во всех современных браузерах — Chrome, Firefox, Safari, Edge и Opera. Он является частью Selectors Level 3, поэтому его можно использовать без запасного варианта в современных браузерах.

Связанные селекторы

:only-child — соответствует элементу без братских элементов любого типа.
:first-of-type — первый элемент своего типа среди братских.
:last-of-type — последний элемент своего типа среди братских.
:nth-of-type — выбирает элементы типа по позиции.

Практика

Что представляет псевдокласс ':only-of-type' в CSS?

':only-of-type' представляет элемент, у которого нет братских элементов данного типа внутри родительского контейнера.':only-of-type' представляет целевой элемент, который является единственным дочерним элементом своего типа внутри родителя.':only-of-type' представляет элемент с определённым ID или классом внутри родительского контейнера.':only-of-type' представляет стилизованный элемент, который является единственным дочерним элементом своего типа во всём документе.