Wygląd linków na bazie docelowego adresu URL
Dziś troszkę bardziej rozbudowany temat, bo zajmiemy się wyglądem linków. Przy czym nie będziemy formatować linków globalnie. Będziemy działać precyzyjnie, formatując linki na podstawie adresu, na jaki wskazują.
Wygląd wszystkich linków możemy ustawić za pomocą takiego kodu:
a { ... }
Ale możemy też zadziałać tylko na niektóre linki, i to nie tylko dodając ID lub klasę (linku lub obiektu, w którym się znajdują), ale też wskazując adres URL.
Zaczynamy od reguły, która działa tylko i wyłącznie dla linków prowadzących do identycznego adresu:
a[href="https://webinsider.pl/dokladny-link"] { ... }
Jakiekolwiek odstępstwo z przodu, z tyłu czy w środku spowoduje, że regułą nie zostanie zastosowana.
Teraz trochę mniej restrykcyjne podejście, wystarczy, że link docelowy będzie się zaczynał we wskazany sposób (znak: ^):
a[href^="https://webinsder.pl/poczatek-linku"] { ... }
Możemy też do sprawy podejść z drugiej strony, czyli pilnować tego, co jest na końcu danego linku (znak: $):
a[href$="koniec-linku"] { ... }
I teraz coś totalnie luźnego, czyli wystarczy, że link zawiera wybrane przez nas znaki (znak: *)
a[href*="link-zawierajacy-ten-tekst"] { ... }
I właściwie na tym mógłbym zakończyć, ale skoro jesteśmy przy linkach w CSSie, to warto wspomnieć jeszcze o 3 dodatkowych pseudo-klasach, z których zdarza mi się korzystać (jest tego więcej, ale reszta to już margines):
- :hover (np. a:hover) – wygląd linku (lub innego elementu) pop najechaniu na niego myszką (np. zmiana tła czy podkreślenie)
- :link (np. a:link) – dotyczy linków, których użytkownik jeszcze nie klikał (nieodwiedzanych adresów)
- :visited (np. a:visited) – analogicznie jak wyżej, tylko dla linków, które były już kliknięte (odwiedzone adresy)
I może jeszcze 2 pseudo-elementach, które również w tym kontekście mogą się przydać (np. by dodać ikonę do linku):
- ::before (np. a::before) – modyfikacja wyglądu przed elementem
- ::after (np. a::after) – modyfikacja wyglądu za elementem
A z racji tego, że często piszę o WordPressie, to tylko dla zasady dodam, że oczywiście w WordPressie też można z tego skorzystać. Wystarczy kod dodać do pliku „style.css” naszego motywu potomnego, w ustawieniach motywu (jeśli posiada taką opcję), czy też samego WordPressa, na ekranie personalizacji (WP-Admin: Wygląd -> Dostosuj: Dodatkowy CSS).
- Naruszenie ochrony danych osobowych przez wysłanie wiadomości e-mial na błędny adres e-mail, nawet jeśli tak podał go klient - 1970-01-01
- Interaktywne Wheel Of Life (koło życia) w WordPressie, generowane przy pomocy biblioteki amCharts - 1970-01-01
- Your Year In Beer, czyli podsumowanie roku w serwisie Untappd dostępne (bezpłatnie) dla każdego - 1970-01-01
Łapka w góry za temat. ;)