Die Pseudoklasse :target greift auf ein Element, sobald seine id als Anker-Link in der URL steht (z.B. seite.html#sichtbar1).
Damit lassen sich ohne JavaScript einfache Interaktionen bauen — z.B. ein Element einblenden, wenn ein Link angeklickt wird.
/* Normalzustand: Text sehr hell/unsichtbar */ div div { color: rgba(0,0,0,.2); } /* :target – sobald dieses Element im Anker-Link steht: Text sichtbar */ :target { color: rgba(0,0,0,.8); } /* Verstecktes div: standardmäßig ausgeblendet */ #versteckt { display: none; } /* :target – einblenden sobald der "verstecktes div"-Link geklickt wird */ #versteckt:target { display: block; }
Klicke auf die Buttons unten — beachte wie sich die Text-Helligkeit und die Sichtbarkeit des versteckten Divs ändern.
Div #sichtbar1 (roter Hintergrund). Klicke "erstes div" um es als :target zu markieren.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
Div #sichtbar2 (blauer Hintergrund). Klicke "zweites div" um es als :target zu markieren.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
Div #versteckt — standardmäßig display: none. Erst nach Klick auf "verstecktes div" sichtbar via :target.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.