:first-of-type и :last-of-type

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

:first-of-type удобно использовать, когда внутри родителя встречаются разные элементы, вроде <p> или <div>. Запись div:first-of-type читается слева направо — сперва выбираются все элементы <div> у одного родителя, затем среди них определяется первый элемент. В примере 1 :first-of-type добавляется к разным селекторам и задаёт цвет текста.

Пример 1. Использование :first-of-type

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>:first-of-type</title>
  <style>
   div:first-of-type { color: blue;  }
   p:first-of-type   { color: green; }
  </style>
 </head>
 <body>
  <section>
   <div>Uno</div>
   <p>Один</p>
   <div>Dos</div>
   <p>Два</p>
   <div>Tres</div>
   <p>Три</p>
  </section>
 </body>
</html>

Результат данного примера показан на рис. 1. Текст первого <div> задаётся синим цветом, а текст первого <p> зелёным цветом.

Цвет первых элементов

Рис. 1. Цвет первых элементов

:first-of-type и :first-child выбирают первый элемент в группе, но делают это совершенно по разному.

:first-child выбирает только первый элемент, при этом какой именно это элемент не рассматривается. Селектор section :first-child выберет первый элемент внутри <section> из примера 1 — это <div>Uno</div>.
:first-of-type выбирает первый элемент каждого типа. В примере 1 внутри <section> встречаются элементы <div> и <p>. Селектор section :first-of-type выберет первый элемент <div> и первый элемент <p> — это <div>Uno</div> и <p>Один</p>.
Запись p:first-child читается справа налево: сперва находится первый элемент, затем проверяется что это элемент <p>. Будет выбран только первый элемент и только если это <p>. Таким образом, селектор p:first-child в примере 1 ничего не выберет, поскольку первым элементом у нас идёт <div>, а не <p>.
Запись p:first-of-type читается слева направо: сперва находятся все элементы <p> и среди них уже выбирается первый элемент. Так что селектор p:first-of-type выберет <p>Один</p>, несмотря на то, что формально <p> внутри <section> идёт вторым.

Исходя из этого, :first-of-type обычно применяется, когда комбинируются разные элементы, тогда как :first-child используется для однотипных элементов, вроде <li>, <td>, <tr> и др.

В примере 2 :first-of-type добавляется к <p>, чтобы изменить стиль первого абзаца внутри <article>.

Пример 2. Использование :first-of-type

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>:first-of-type</title>
  <style>
   article p:first-of-type { 
    color: green; /* Цвет текста */
    font-size: 1.2em; /* Размер текста */
   }
  </style>
 </head>
 <body>
  <article>
   <h2>Тангенциальный вихрь</h2>
   <p>Непосредственно из законов сохранения следует, 
   что излучение катастрофично стабилизирует кристалл.</p>
   <p>Если предварительно подвергнуть объекты длительному 
   вакуумированию, плазменное образование 
   восстанавливает магнит.</p>
  </article>
 </body>
</html>

Псевдокласс :last-of-type работает схожим образом, но выбирает последний элемент определённого типа в группе своих собратьев. В примере 3 к последнему абзацу через псевдоэлемент ::after добавляется красный квадрат.

Пример 3. Использование :last-of-type

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>:last-of-type</title>
  <style>
   p:last-of-type::after { 
    content: '■';
    color: red;
    padding-left: 0.5em;
   }
  </style>
 </head>
 <body>
  <article>
   <h2>Тангенциальный вихрь</h2>
   <p>Непосредственно из законов сохранения следует, 
    что излучение катастрофично стабилизирует кристалл.</p>
    <p>Если предварительно подвергнуть объекты длительному 
    вакуумированию, плазменное образование 
    восстанавливает магнит.</p>
  </article>
 </body>
</html>

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

Использование :last-of-type для абзаца