:first-childСелектор вам омогућава да одмах циљати први елемент у другим елементом. Дефинисан је у спецификацији ЦСС Селецторс Левел 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ће се подударати са првом појавом наведеног елемента, чак и ако у ХТМЛ-у не дође апсолутно прво. У примеру изнад исход би био исти, само зато што је прво дете дете articleтакође први pелемент. Ово открива моћ :first-child: може да идентификује елемент у односу на сву своју браћу и сестре, а не само на браћу и сестре исте врсте.
Што више цомплете Пример испод показује употребу :first-childи повезане селектор псеудо-класе, :last-child.
Подршка прегледача
| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| Било који | 3.2+ | Било који | 9.5+ | 9+ | Било који | Било који |
:first-childје представљен у ЦСС Селецторс Модуле 3, што значи да га старе верзије прегледача не подржавају. Међутим, савремена подршка за прегледаче је беспрекорна, а нови псеудо-селектори се широко користе у производним окружењима. Ако вам је потребна старија подршка за прегледач, или полифил за ИЕ, или користите ове бираче на некритичне начине, уз прогресивно побољшање, што се препоручује.