Pseudoklasa CSS :target wybiera tzw. element docelowy kotwicy (ang. target element), do którego odnosi się identyfikator fragmentu (ang. fragment identifier) obecny w adresie URL strony.
Inaczej mówiąc, jeśli na stronie internetowej znajduje się element ze zdefiniowanym identyfikatorem (id), np. <h2 id="pseudoklasa-target">…</h2>, to można utworzyć do niego łącze:
<a href="#pseudoklasa-target">Pseudoklasa target</a>Gdy użytkownik kliknie taki odnośnik, to do adresu w pasku adresu przeglądarki zostanie dodany człon #pseudoklasa-target – ten element nazywa się identyfikatorem fragmentu.
Pseudoklasa :target odnosi się właśnie do elementu o identyfikatorze wskazywanym przez identyfikator fragmentu obecny w adresie URL w pasku adresu przeglądarki.
Przykład
Nagłówek tej sekcji ma identyfikator przyklad-target – <h2 id="przyklad-target">Przykład</h2>. Ponadto do tej strony jest dodana następująca reguła z pseudoklasą :target:
:target {color: lightpink}Jeśli klikniesz ten link prowadzący do tego nagłówka, jego kolor zmieni się na jasnoróżowy.
Aby element ten wrócił do swojego pierwotnego koloru, należy usunąć identyfikator fragmentu z adresu w przeglądarce — spójrz na poniższy zrzut ekranu.
Aby przywrócić pierwotny wygląd nagłówka Przykład, usuń z adresu podkreślony fragment.
Składnia :target
Składnia pseudoklasy :target:
:target {...}