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
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.
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).
See the Pen :first-of-type by Aura (@Julka85) on CodePen.
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ć:
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.