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ć: