Селектор :only-of-type используется для обращения к единственному элементу определенного типа, который находится в определенном окружении. В то время как селектор :only-child определяет только, является ли элемент единственным в блоке,  селектор :only-of-type проверяет, является ли элемент единственным элементом своего типа в блоке. Таким образом, если использовать следующую разметку HTML:

<div>
    <h1>Заголовок</h1>
    <p>Текст…</p>
</div>

То следующее свойство не изменит цвет абзаца:

div p:only-child { color: red; }

Так как в этом случае абзац — не единственный элемент в родительском блоке. Но использование селектора  :only-of-type окрасит абзац в красный цвет:

div p:only-of-type { color: red; }

Это произойдет, так как абзац — единственный элемент своего типа в этом блоке.

Далее находится демонстрация работы этого примера:

Конечно, можно использовать так же и классы, и другие селекторы:

div.wolf span.cub:only-of-type { … }

Такая запись выберет элемент <span> класса cub только если это единственный элемент <span> этого класса в блоке класса wolf.

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

Cелектор  :only-of-type особенно удобен для задания стиля изображений в элементах фигур. Так как в этих элементах почти всегда будет находится элемент подписи фигуры и элемент изображения, для задания стиля изображению подойдет именно селектор  :only-of-type. Если известно, что в блоке находится только одно изображение, можно задать этому изображению ширину в 100% от родительского блока:

figure img:only-of-type {
    width: 100%;
    height: auto;
}

Если в элементе фигуры находится более, чем одно изображение, можно применить способ отображения Flexbox или другое решение, чтобы равномерно распределить элементы. Еще можно выбирать противоположные элементы с помощью отрицательного селектора, чтобы задать свойства только в ситуации, когда в элементе фигуры содержится более одного изображения:

figure img:not(:only-of-type) {
    flex: 1;
}

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

<article></article>
<article></article>
<div>
  <article></article>
</div>

И такого кода CSS:

article:only-of-type {
    border: 1px solid red;
}

Только к третьему элементу статьи применится красная рамка.

Поддержка

Cелектор :only-of-type поддерживается всеми современными версиями браузеров, начиная от 9 версии браузера Internet Explorer и выше, а также почти всеми устаревшими версиями браузеров, так что его можно совершенно спокойно использовать.

Автор урока Dudley Storey 

Перевод — Дежурка

Смотрите также:

• Создание сброса для кода CSS
• Горизонтальное меню с размытием неактивных пунктов на CSS
• Использование отрицающего псевдокласса CSS3