Przejdź do treści

Etykieta :target

Jak zmienić wygląd odnośników (odsyłaczy, linków) do etykiety (kotwica)?

CSS 3

selektor:target { cecha: wartość }
Selektorem może być praktycznie dowolny znacznik, który posiada atrybut id="..." albo ewentualnie może to być element A posiadający atrybut name="..." [zobacz: Odsyłacz do etykiety i Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Czasami podział serwisu na podstrony jest niewystarczający. Zdarza się, że jeden artykuł jest podzielony dodatkowo na niewielkie sekcje - zbyt małe, aby tworzyć z każdej z nich osobną podstronę. Chcielibyśmy jednak mieć możliwość odesłania czytelnika bezpośrednio do podanej sekcji, żeby nie musiał jej szukać "ręcznie". W takiej sytuacji stosuje się etykiety (np.: <h2 id="nazwa_etyiety">Nazwa sekcji</h2>). Do takich etykiet można później tworzyć odsyłacze. Problemem takiego rozwiązanie może być fakt, że jeśli czytelnik przewinie stronę, może mieć problemy z późniejszym odszukaniem etykiety, do której pierwotnie został skierowany. Prezentowane tutaj polecenie pozwala wyróżnić wizualnie właśnie taką etykietę, podczas gdy ewentualne pozostałe etykiety na tej samej podstronie pozostaną bez zmian.

Przykład :target

Po wpisaniu w arkuszu stylów:
:target { font-weight: bold }
a w dowolnym miejscu strony:
<span id="przyklad_etykieta1">etykieta "przyklad_etykieta1"</span>, <span id="przyklad_etykieta2">etykieta "przyklad_etykieta2"</span>
<p><a href="#przyklad_etykieta1">odsyłacz "#przyklad_etykieta1"</a>, <a href="#przyklad_etykieta2">odsyłacz "#przyklad_etykieta2"</a></p>
po kliknięciu linku do danej etykiety, zostanie ona pogrubiona (w tym czasie druga etykieta nie będzie pogrubiona):

etykieta "przyklad_etykieta1", etykieta "przyklad_etykieta2"

Aby przetestować, kliknij w poniższe linki:

odsyłacz "#przyklad_etykieta1", odsyłacz "#przyklad_etykieta2"

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
:target1
2008-12-11
1
2004-11-09
12
2015-07-29
9.5
2008-06-12
1.3
2005-04-15

Komentarze

Zobacz więcej komentarzy

Facebook