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