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 {...}