Від автора: селектор only-of-type є логічним продовженням CSS селекторів empty і only child. Цей селектор вибирає один примірник конкретного елемента в певному контексті.

Селектор only child перевіряє, щоб шуканий елемент був усередині контейнера, а селектор only-of-type дивиться, щоб елемент такого типу був єдиним в даному контексті. Розглянемо розмітку:

CSS код нижче не змінить стиль параграфа:

div p:only child { color: red; }

… так як параграф не єдиний дочірній елемент у батьків div. А ось селектор only-of-type зробить колір тексту в параграфі червоним:

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

… так як всередині DIV а лише один тег параграфа. Селектор можна використовувати на класах і інших селекторах:

div.wolf span.cub { … }

Елемент span з класом cub буде обраний в тому випадку, якщо це єдиний тег span з таким класом всередині DIV а з класом wolf.

Способи застосування селектора only-of-type

Селектор only-of-type особливо зручно використовувати для стилізації зображень в тезі figure. Так як усередині таких тегів майже завжди присутні figcaption і img, only child не підійде. А ось селектор only-of-type буде самий раз. Якщо нам відомо, що в контейнері тільки одне зображення, його можна адаптивно збільшити на 100% ширини його батька:

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

Якщо в figure більше одного зображення, можна використовувати flexbox або інший спосіб для рівномірного розподілу елементів всередині контейнера. Можна скористатися інверсією за допомогою селектора :not, щоб визначити, скільки зображень в тезі figure (більше одного, чи ні):

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

Якщо у обраного селектора немає батька, only-of-type прибере з вибірки усі елементи, у яких є суміжні елементи того ж типу на одному рівні. Розберемо розмітку:

Код CSS:

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

… рамка з’явиться тільки у третього тега article.

Підтримка

Селектор only-of-type підтримується у всіх сучасних браузерах, в тому числі в IE9+ і більш ранніх версіях. Приміром, є підтримка в Safari 3.1+. У IE8 підтримки немає.