Псевдокласс :first-of-type

Псевдокласс :first-of-type задаёт стиль первого элемента определённого типа в группе братских элементов (имеющих одного родителя).

В качестве примера рассмотрим следующий код HTML:

<article>
  <h1>Роль цитокинов при дорсалгии</h1>
  <p>Автор: Гордон Фримен, канд. физ.-мат. наук</p>
  <p>Содержание статьи</p>
  <address>Почта: freemen@blackmesa.com</address>
  <p>Опубликовано: <time datetime="2018-11-27">27 ноября 2018</time></p>
</article>

Псевдокласс :first-of-type без указания селектора выберет первые элементы каждого типа (<h1>, <p>, <address>, <time>) и установит для них красный цвет текста.

article :first-of-type { color: red; }

При добавлении селектора к :first-of-type сперва выбираются указанные элементы, затем из них берётся первый элемент. Наличие других элементов (<h1> и <address>) и их порядок не учитываются.

article p:first-of-type { color: red; }

Здесь будет выбран первый абзац внутри <article> и выделен красным цветом.

Вместо :first-of-type допустимо использовать :nth-of-type(1).

Синтаксис

Селектор:first-of-type  {  ...  }
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Пример

<!DOCTYPE html> <head> <meta charset="utf-8"> <title>first-of-type</title> <style> table { border-collapse: collapse; /* Убираем двойные границы */ width: 100%; /* Ширина таблицы */ border-spacing: 0; /* Расстояние между ячеек */ } td { border: 1px solid #6A3E14; /* Параметры рамки */ padding: 4px; /* Поля в ячейках */ } tr:first-of-type { background: #808990; /* Цвет фона */ color: #fff; /* Цвет текст */ } td:first-of-type { background: #CFD6D3; /* Цвет фона */ } </style> </head> <body> <table> <tr> <td>&nbsp;</td><td>1998</td><td>1999</td><td>2000</td><td>2001</td> <td>2002</td><td>2003</td> </tr> <tr> <td>Нефть</td> <td>3</td><td>22</td><td>34</td><td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td> <td>4</td><td>13</td><td>69</td><td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td> <td>4</td><td>7</td><td>73</td><td>79</td><td>34</td><td>86</td> </tr> </table> </body> </html>

Результат данного примера показан на рис. 1.

Результат использования псевдокласса :first-of-type в таблице

Рис. 1. Результат использования псевдокласса :first-of-type в таблице

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

Спецификация Статус
Selectors Level 4 Рабочий проект
Selectors Level 3 Рекомендация

Браузеры

9 12 1 9.5 3.2 3.5
2.1 1 10 3.2

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.
Псевдоклассы