#38. Pseudoklasy

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

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!