Selektor :first-child oraz
:last-child
Selektor :first-child
pozwala wybrać pierwszego potomka danego elementu. Natomiast selektor :last-child
wybiera ostatnie dziecko elementu.
Przykładowo, chcemy wybrać pierwszy element p
zawarty w div
. Możemy specjalnie nadać mu klasę i do niej dodawać właściwości, lub zrobić to bez ingerencji w plik HTM używając selektora :first:child
.
Potrzebna reguła wyglądałaby następująco: div > p:first-child {}
.
Analogicznie wyglądała by sytuacja do zastosowania pseudoklasy :last-child
.
W poniższym przykładzie zobrazuję Wam zastosowanie nowo poznanych pseudoklas na mini stronce. Dokładniej, to usunąłem pierwszą ramkę z listy oraz zmieniłem kolor jednej z nich. Sprawdź:
inspiring-bhabha-5chot
inspiring-bhabha-5chot by danielminschinski
Selektor :nth-child(even) oraz :nth-child(odd)
Selektor :nth-child(even)
pomoże nam wybrać wszystkie parzyste potomki danego typu. Analogicznie selektor :nth-child(odd)
odnosi się do nieparzystych elementów. Tego typu pseudoklasy często przydają się do stylowania list lub tabel.
Przykładowo, jeżeli będziemy chcieli wybrać parzyste elementy p
umieszczone w elemencie o klasie container
to należało by regułę napisać następująco: .container p:nth-child(even){}
.
Natomiast odnosząc się do nieparzystych elementów p
to zastosowalibyśmy regułę: .container p:nth-child(odd){}
.
Spójrz na poniższy przykład. Zastosowałem powyższe reguły w tabeli:
serverless-morning-v7i44
serverless-morning-v7i44 by danielminschinski
Selektor :nth-child(number)
Selektor :nth-child(number)
wspomaga przy wyborze konkretnego potomka danego typu, które jest określone przez number.
Przykładowo, jeżeli stworzymy selektor div p:nth-child(3)
to odniesiemy się do piątego paragrafu potomka div
.
Selektor sprawdza się, gdy chcemy wyróżnić jakiś element strony bez potrzeby dodawania dla niego specjalnej klasy. Spójrz na dobrze Ci znany przykład:
bold-leaf-s9rrj
bold-leaf-s9rrj by danielminschinski
Selektor :not(selector)
Selektor :not(selector) wyklucza stylowanie z danego zakresu. Przykładowo, jeżeli chcemy ostylować wszystkie elementy a
z wyłączeniem tych z klasą pod nazwą .klasa
. W rezultacie taki selektor wyglądałby następująco: a:not(.klasa)
.
Spójrz na poniższy przykład w którym zastosowałem selektor wykluczający:
fast-architecture-f31rm
fast-architecture-f31rm by danielminschinski
Powyżej starałem się wyjaśnić jak działają najważniejsze pseudoklasy. W kolejnym materiale opiszę pseudolementy. Z góry zapraszam na środowy materiał😉
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA