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

Dziś chciałam zająć się 2-ma pseudo elementami :first-child i :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

Przykład użycia:

li:first-child { color:red; }

Jak działa :first-child

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

.second li:first-of-type { color:blue; }

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

Interpretacja selektora przez przeglądarki

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Tak	3.2+	Tak	9.5+	9+	Tak	Tak

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

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

.second li:first-of-type { color:blue; }
.second-2 td:first-of-type { color:blue; }
.second-3 tr:first-of-type { color:blue; }

Interpretacja selektora przez przeglądarki

Chrome	Safari	Firefox	Opera	IE	iOS
4.0	9.0	3.5	9.5+	3.2	9.6

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

Warto przeczytać:

• Zmiana wyglądu pierwszej litery
• pseudo element :before i :after