Wczoraj opublikowałem artykuł o tym, jak za pomocą kodu CSS ustawić kolor zaznaczonego tekstu (wybrany przez nas, zamiast standardowego niebieskiego). Jest to wręcz banalna sprawa, i wszystko sprowadza się do wykorzystania jedno z tzw. pseudo-elementów dostępnych w CSSie. Z tego, co widzę, artykuł wygenerował nawet jakieś odsłony, dlatego uznałem, że będę częściej publikował tego typu małe porady. I to niezależnie od tego, czy akurat jakaś koleżanka będzie o to pytać, czy po prostu przyjdzie mi do głowy taki pomysł… ;-)

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).