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:
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:
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:
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:
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
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA