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