#39. Pseudoselektory

Pseudoselektor ::first-letter

Pseudoselektor ::first-letter daje możliwość ostylowania pierwszej litery w wybranym elemencie. Dotychczas do takich zadań potrzebowaliśmy tagów span wokół wybranej litery do której nadawano klasę i style.

Powyższy pseudoselektor można stosować w przypadku, gdy prowadzimy stronę z tekstami i np. chcemy wyróżnić pierwszą literę artykułu.

Spójrz na poniższy przykład w którym zastosowałem pseudoselektor powiększający pierwszą literę paragrafu:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

optimistic-hodgkin-bezdf

optimistic-hodgkin-bezdf by danielminschinski

Pseudoselektor ::first-line

Przejdźmy do kolejnego pseudoselektora – ::first-line.

Po nazwie można wnioskować znaczenie powyższego elementu. Wybieramy pierwszą linię danego tekstu i stylujemy ją wg naszych upodobań. Przejdźmy do wcześniejszego przykładu, w którym zaprezentuje możliwości pseudoselektora:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

exciting-wing-rrw31

exciting-wing-rrw31 by danielminschinski

Pseudoselektor ::selection

Kolejny pseudoselektor który działa na tekscie to ::selection.

Odnosimy się do zaznaczonego tekstu, jak np. w momencie kiedy chcemy skopiować jakiś fragment tekstu ze strony, żeby później go gdzieś wykorzystać.

Możliwość zmiany zaznaczonego tekstu możemy wykorzystać w momencie kiedy np. chcemy przystosować zaznaczenie do kolorystki naszej strony, żeby jeszcze bardziej zapadła użytkownikowi w pamięć.

Ważną informacją jest, że zaznaczenie możemy określać dla całej strony, lub zawartości poszczególnych elementów.

Przykładowo tak określimy wygląd zaznaczonego tekstu dla całej strony: ::selection

Przejdźmy do naszego przykładu w którym zastosujemy powyższy pseudoselektor:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

stupefied-noether-xisr8

stupefied-noether-xisr8 by danielminschinski

Pseudoklasa :before

:before jest to pseudoklasa pozwalająca nam wstawić w zawartość strony rozmaity kontent oraz kolejne elementy blokowe. 

Powyższy pseudoelement jest powszechnie stosowany do wstawiania rozmaitych elementów np. podczas tworzenia dymku z wypowiedzią tworzymy obrócony element blokowy sugerujący skąd dochodzi wypowiedź. 

Sprawdź poniższy przykład w którym zaprezentowałem powyższe rozwiązanie:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

gifted-lichterman-mqiif

gifted-lichterman-mqiif by danielminschinski

To by było na tyle o pseudoselektorach. Na praktycznych przykładach przełożyłem informacje, dzięki którym powinniście szybko załapać o co tak naprawdę chodzi. Głównym celem pseudoselektorów jest tworzenie najprostrzych rozwiązań przy tworzeniu styli danych elementów html.

W kolejnym materiale zaprezentuje Wam możliwości selektorów atrybutu.

Do kolejnego – tzn. do środy, godz. 15:00🕒😉

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb

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