`:first-of-type` CSS-псевдокласс

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

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

:first-of-type CSS-псевдокласс обозначает первый элемент своего типа (имени тега) среди группы соседних элементов.

Попробуйте

dt {
  font-weight: bold;
}

dd {
  margin: 3px;
}

dd:first-of-type {
  border: 2px solid orange;
}

<dl>
  <dt>Vegetables:</dt>
  <dd>1. Tomatoes</dd>
  <dd>2. Cucumbers</dd>
  <dd>3. Mushrooms</dd>
  <dt>Fruits:</dt>
  <dd>4. Apples</dd>
  <dd>5. Mangos</dd>
  <dd>6. Pears</dd>
  <dd>7. Oranges</dd>
</dl>

Синтаксис

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

Примеры

Стилизация первого абзаца

HTML

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

CSS

p:first-of-type {
  color: red;
  font-style: italic;
}

Результат

Вложенные элементы

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

HTML

<article>
  <div>This `div` is first!</div>
  <div>This <span>nested `span` is first</span>!</div>
  <div>
    This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!
  </div>
  <div>This <span>nested `span` gets styled</span>!</div>
  <p>This `p` qualifies!</p>
  <div>This is the final `div`.</div>
</article>

CSS

article :first-of-type {
  background-color: pink;
}

Результат

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

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

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

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

См. также

:first-child, :last-of-type, :nth-of-type()

© 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/:first-of-type