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

CSS псевдокласс :first-of-type выбирает элемент, который является первым элементом своего типа среди братских элементов. Он эквивалентен [:nth-of-type(1)](/learn-css/nth-of-type).

Селектор считает братские элементы по имени HTML-тега, а не по классу, атрибуту или роли. Для каждого уникального типа элемента внутри родителя ровно один элемент может соответствовать :first-of-type — первый с таким тегом. Это означает, что у одного родителя может быть несколько совпадений :first-of-type одновременно (по одному на каждый тег), и именно это поведение чаще всего удивляет тех, кто переходит с :first-child.

:first-of-type против :first-child

Селектор :first-of-type часто сравнивают с :first-child, однако они различаются по области применения. :first-child совпадает с элементом только тогда, когда он является самым первым дочерним элементом своего родителя вне зависимости от типа, тогда как :first-of-type совпадает с первым братским элементом заданного типа, даже если перед ним стоят другие элементы. Оба селектора имеют одинаковую специфичность CSS.

Рассмотрим следующую разметку:

<div>
  <h2>Heading</h2>
  <p>First paragraph</p>
  <p>Second paragraph</p>
</div>

p:first-child не совпадает ни с чем — первый дочерний элемент — <h2>, а не <p>.
p:first-of-type совпадает с первым <p> («First paragraph»), поскольку это первый параграф среди братских элементов.

Используйте :first-of-type, когда нужно выбрать «первый заголовок», «первый список» или «первый параграф» внутри контейнера вне зависимости от того, какие теги ему предшествуют. Прибегайте к :first-child лишь тогда, когда элемент должен буквально быть открывающим дочерним.

Когда использовать

Несколько практических шаблонов:

Стилизация вводного абзаца статьи без добавления класса в разметку.
Удаление верхнего отступа или рамки у первого элемента повторяющегося компонента (например, первого <figure> в галерее).
Комбинирование с :last-of-type для обрезки внешних краёв стека или с :nth-of-type(), если нужна позиция, отличная от первой.

Если родитель содержит только один элемент определённого типа, этот элемент одновременно является его :first-of-type и :only-of-type.

Опасно

Начиная с Selectors Level 4, выбранный элемент не требует строго наличия родительского узла в DOM для совпадения.

Версия

Selectors Level 3

Selectors Level 4

Синтаксис

CSS синтаксис :first-of-type

:first-of-type {
  css declarations;
}

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:first-of-type {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:first-of-type selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
  </body>
</html>

Попробуйте сами »

Пример селектора :first-of-type с тегом `<article>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:first-of-type {
        font-size: 22px;
        color: #777777;
      }
    </style>
  </head>
  <body>
    <h2>:first-of-type selector example</h2>
    <article>
      <h2>This is a title.</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
    </article>
  </body>
</html>

Попробуйте сами »

Пример селектора :first-of-type с несколькими HTML-тегами:

Здесь article:first-of-type совпадает только с первым <article>, поэтому тёмный фон не применяется ко второму. Селектор ограничен родителем и типом тега, что делает его идеальным для стилизации первого вхождения повторяющегося блока.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        margin: 0;
      }
      article:first-of-type {
        background-color: #777777;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h2>:first-of-type selector example</h2>
    <article>
      <p>This is a first element!</p>
      <p>This <em>nested 'em' is first</em>!</p>
      <p>This <strong>nested 'strong' is first</strong>, but this <strong>nested 'strong' is last</strong>!</p>
      <p>This <span>nested 'span' gets styled</span>!</p>
      <q>This is a 'q' element!</q>
      <p>This is a last element.</p>
    </article>
    <article>
      <p>This is a second article.</p>
    </article>
  </body>
</html>

Попробуйте сами »

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

Браузер	Версия
Chrome	1.0
Firefox	1.0
Safari	1.0
Edge	12.0
Opera	7.0
IE	9.0

Практика

Что такое CSS псевдокласс :first-of-type и как он используется?

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

:first-of-type против :first-child

Когда использовать

Версия

Синтаксис

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

Пример селектора :first-of-type с тегом <article>:

Пример селектора :first-of-type с несколькими HTML-тегами:

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

Практика

Пример селектора :first-of-type с тегом `<article>`: