: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
Результат данного примера показан на рис. 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
Псевдокласс :last-of-type работает схожим образом, но выбирает последний элемент определённого типа в группе своих собратьев. В примере 3 к последнему абзацу через псевдоэлемент ::after добавляется красный квадрат.
Пример 3. Использование :last-of-type
Результат данного примера показан на рис. 2.
Рис. 2. Использование :last-of-type для абзаца