:first-of-typeСелектор в CSS дозволяє цільової перше входження елемента в межах його контейнера. Це визначено в специфікації CSS Selectors Level 3 як "структурний псевдо-клас", тобто воно використовується для стилювання вмісту на основі його взаємозв'язку з батьківським вмістом та вмістом братів і сестер.
Припустимо, у нас є стаття із заголовком та кількома абзацами:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Ми хочемо зробити перший абзац більшим, як своєрідний “леде” чи вступний абзац. Замість того, щоб давати йому клас, ми можемо використовувати його :first-of-typeдля вибору:
p:first-of-type ( font-size: 1.25em; )Використання :first-of-typeдуже схоже на, :nth-childале з однією критичною відмінністю: воно менш конкретне. У наведеному вище прикладі, якби ми використовували p:nth-child(1), нічого не сталося б, оскільки абзац не є першим дочірнім елементом його батьків (the ). Це виявляє силу :first-of-type: він націлений на певний тип елемента в певному розташуванні стосовно подібних братів і сестер, а не всіх братів і сестер.
Більш повний приклад демонструє використання :first-of-typeі пов'язаний селектор псевдо-класу, :last-of-type.
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Працює | 3,2+ | Працює | 9,5+ | 9+ | Працює | Працює |
:first-of-typeбув введений в модулі CSS Selectors 3, що означає, що старі версії браузерів його не підтримують. Однак сучасна підтримка браузера бездоганна, і нові псевдоселектори широко використовуються у виробничих середовищах. Якщо вам потрібна старіша підтримка браузера, або polyfill для IE, або використовуйте ці селектори некритичними способами - прогресивне вдосконалення, яке рекомендується.