Etykieta :target
Jak zmienić wygląd odnośników (odsyłaczy, linków) do etykiety (kotwica)?
CSS 3
selektor:target { cecha: wartość }
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 | |
---|---|---|---|---|---|
:target | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 9.5 2008-06-12 | 1.3 2005-04-15 |