:first-childSelektor pozwala natychmiast kierować pierwszy element wewnątrz innego elementu. Jest zdefiniowana w specyfikacji CSS Selectors Level 3 jako „strukturalna pseudoklasa”, co oznacza, że jest używana do stylizowania treści na podstawie jej relacji z treścią nadrzędną i siostrzaną.
Załóżmy, że mamy artykuł i chcemy powiększyć pierwszy akapit - na przykład „lede” lub fragment tekstu wprowadzającego:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Zamiast nadawać mu klasę (np. .first), Możemy :first-childgo wybrać:
p:first-child ( font-size: 1.5em; )Stosowanie :first-childjest bardzo podobne do, :first-of-typeale ma jedną zasadniczą różnicę: jest mniej szczegółowe. :first-childspróbuje dopasować tylko bezpośrednie pierwsze dziecko elementu nadrzędnego, podczas gdy first-of-typedopasuje pierwsze wystąpienie określonego elementu, nawet jeśli nie jest ono absolutnie pierwsze w kodzie HTML. W powyższym przykładzie wynik byłby taki sam, tylko dlatego, że articletak się składa , że pierwsze dziecko elementu również jest pierwszym pelementem. To ujawnia siłę :first-child: może identyfikować element w odniesieniu do wszystkich jego rodzeństwa, a nie tylko rodzeństwa tego samego typu.
Pełniejsza Poniższy przykład pokazuje zastosowanie :first-childoraz powiązane selektor pseudo dla klasy :last-child.
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Każdy | 3.2+ | Każdy | 9.5+ | 9+ | Każdy | Każdy |
:first-childzostał wprowadzony w module 3 selektorów CSS, co oznacza, że starsze wersje przeglądarek go nie obsługują. Jednak obsługa nowoczesnych przeglądarek jest nienaganna, a nowe pseudoselektory są szeroko stosowane w środowiskach produkcyjnych. Jeśli potrzebujesz obsługi starszych przeglądarek, użyj wypełnienia polyfill dla IE lub użyj tych selektorów w sposób niekrytyczny - zalecane jest stopniowe ulepszanie.