Zmienienie wyglądu pierwszego elementu. Selektory CSS :first-child lub :first-of-type

Czas czytania: < 1 minut

Dziś chciałam zająć się 2-ma pseudo elementami :first-child:first-of-type.

Jak sama nazwa na to wskazuje ich zadaniem jest manipulowanie pierwszym elementem w grupie. W brew pozorom umiejętność zmiany wyglądu pierwszego lub ostatniego elementu jest całkiem przydatna. Umożliwia nam bowiem manipulację rozłożeniem np. artykułów na stronie. Możemy zrobić by pierwszy miał inny wygląd, był szerszy lub wyższy jedynie z pomocą CSS.

Gdzie używamy :first-child lub :first-of-type

Selektory te wykorzystuje się je do edycji własności elementu tylko wtedy gdy jest on pierwszym węzłem potomnym swojego rodzica (czyli tzw. pierwszym dzieckiem).

Warto tu wspomnieć, że :first-child ignoruje węzły tekstowe.

Na jakie elementy działają:

  • div,
  • tabela,
  • punktowana lista

Jak działa :first-child

Pokażę teraz jak działa :first-child na przykładzie listy i tabeli

See the Pen :first-child by Aura (@Julka85) on CodePen.dark


Interpretacja selektora przez przeglądarki

ChromeSafariFirefoxOperaIEAndroidiOS
Tak3.2+Tak9.5+9+TakTak

Przykłady działania :first-of-type

Podobne działanie możemy uzyskać dzięki :first-of-type (pierwszy z typu).

See the Pen :first-of-type by Aura (@Julka85) on CodePen.dark

 

Interpretacja selektora przez przeglądarki

ChromeSafariFirefoxOperaIEiOS
4.09.03.59.5+3.29.6

Jak widać to dość ciekawe właściwości.

Warto przeczytać: