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