Selektory pseudoklas - CSS
Etykieta :target
Jak zmienić wygląd odnośników (odsyłaczy, linków) do etykiety (kotwica)?
(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)
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"