В :first-childселектора позволява да насочвате първия елемент веднага в друг елемент. Той е дефиниран в спецификациите на CSS Selectors Level 3 като „структурен псевдоклас“, което означава, че се използва за стилизиране на съдържание въз основа на връзката му с родителско и братско съдържание.
Да предположим, че имаме статия и искаме да направим първия абзац по-голям - като „lede“ или парче уводен текст:
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 Module 3, което означава, че старите версии на браузърите не го поддържат. Съвременната поддръжка на браузъра обаче е безупречна и новите псевдоселектори се използват широко в производствените среди. Ако се нуждаете от по-стара поддръжка на браузъра, или polyfill за IE, или използвайте тези селектори по некритични начини - прогресивно подобрение, което се препоръчва.