Przejdź do treści

Selektory pseudoklas

Etykieta

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

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:

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"

Komentarze

Zobacz więcej komentarzy