Selektory#
Pseudokalsa celu#
:target { /* deklaracje */ }Pseudoklasa :target reprezentuje element docelowy wskazywany przez identyfikatora fragmentu w adresie URL dokumentu. Jeśli adres URL dokumentu nie zawiera identyfikatora fragmentu, to dokument nie posiada elementu docelowego.
Niektóre adresy URL wskazują na konkretne położenie w zasobie. Ten rodzaj adresów URL kończy się znakiem hasha (U+0023, #), po którym następuje identyfikator kotwicy (anchor identifier), często nazywany identyfikatorem fragmentu # (fragment identifier). Adresy URL zawierające fragmenty identyfikatorów odwołują się do określonego elementu w dokumencie, którego nazywamy elementem docelowym # (target element).
Poniższy selektor reprezentuje akapity z klasą note, które są elementem docelowym w odsyłającym adresie URL:
p.note:targetW kolejnym przykładzie pseudoklasa :target nadaje elementowi docelowemu (jeśli istnieje) kolor czerwony oraz umieszcza przed nim obrazek:
*:target { color : red; }
*:target::before { content : url(target.png) }Jeśli chodzi o przykład praktyczny, to wystarczy przeanalizować kilka odsyłaczy w obrębie mojej witryny:
#selektory,1,9(wewnętrzny)#pseudokalsa,2,16(wewnętrzny)#target-element(wewnętrzny)css_selektory_sel_psk_cel.html#specyfikacje,4,29(wewnętrzny)css_selektory_pseudoklasy.html#pseudo-class(zewnętrzny, nastąpi przeładowanie strony)
Kliknięcie na jednym z powyższych linków zaowocuje przejściem do elementu docelowego, któremu dodatkowo nadane zostaną określone style (u mnie jest to żółte tło). Takie rozwiązanie poprawia użyteczność strony, gdyż pozwala wizualnie wyodrębnić pewny fragment danego dokumentu, do którego prowadzi kliknięty odsyłacza. Oczywiście style mogą mieć różną postać, możemy przykładowo określić graficzne tło w postaci animowanego gifa, który stopniowo utraci kolor żółty. Jeszcze lepszym pomysłem będzie wykorzystanie przejść CSS lub pozostałych nowinek z najnowszych modułów CSS.
Z pseudoklasą celu związany jest pewien znany błąd, którego sam uświadczyłem. W pewnych sytuacjach usunięcie identyfikatora fragmentu z adresu (bez przeładowania strony) nie unieważni już przypisanych stylów. W ramach testu wystarczy na mojej stronie ręcznie usunąć identyfikator fragmentu w pasu adresowym przeglądarki lub kliknąć na dynamicznie generowaną zieloną strzałkę z "kierunkiem góra". Strzałka wykorzystuje nowy interfejs History z HTM5, dzięki któremu mogę powrócić do strony początkowej (pozbawionej identyfikator fragmentu w adresie) bez przeładowania. Problem pozostawionych stylów można rozwiązać na wiele sposobów za pomocą dodatkowego kodu JS i DOM. Chyba najłatwiejszym z nich jest po prostu wyczyszczenie identyfikatora fragmentu w adresie URL za pomocą polecenia location.hash = "";, na skutek czego anulujemy wcześniej przypisane style, a dopiero potem wywołanie pozostałych poleceń, i tak też postępuje u siebie.