:first-of-type

Псевдокласс :first-of-type CSS псевдокласс представляет собой первый элемент своего типа среди группы элементов-потомков.

Попробуйте

Синтаксис

: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 for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`:first-of-type`	1	12 До Edge 16, Microsoft Edge рассматривает все неизвестные элементы (такие как пользовательские элементы) как одинаковый тип элементов.	3.5	9.5	3.1	18	4	10.1	2	1.0	2

См. также

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

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