Псевдокласс CSS `:only-of-type`

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на множестве устройств и в разных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

:only-of-type CSS псевдокласс соответствует элементу, у которого нет соседних элементов того же типа (с тем же именем тега).

Попробуйте

a:only-of-type {
  color: fuchsia;
}

dd:only-of-type {
  background-color: bisque;
}

<p>
  To find out more about <b>QUIC</b>, check <a href="#">RFC 9000</a> and
  <a href="#">RFC 9114</a>.
</p>

<dl>
  <dt>Published</dt>
  <dd>2021</dd>
  <dd>2022</dd>
</dl>

<p>Details about <b>QPACK</b> can be found in <a href="#">RFC 9204</a>.</p>

<dl>
  <dt>Published</dt>
  <dd>2022</dd>
</dl>

Синтаксис

:only-of-type {
  /* ... */
}

Примеры

Стилизация элементов без соседних элементов того же типа

HTML

<main>
  <div>I am `div` #1.</div>
  <p>I am the only `p` among my siblings.</p>
  <div>I am `div` #2.</div>
  <div>
    I am `div` #3.
    <i>I am the only `i` child.</i>
    <em>I am `em` #1.</em>
    <em>I am `em` #2.</em>
  </div>
</main>

CSS

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

Результат

Спецификации

Спецификация
Селекторы уровня 4 # only-of-type-pseudo

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`only-of-type`	1	12 До Edge 16 Microsoft Edge считает все неизвестные элементы (например, пользовательские элементы) элементами одного типа.	3.5	9.5	3.1	18	4	10.1	2	1.0	2	2

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:only-of-type