Die ':target' Pseudo-Klasse
Eine URL verweist in der Regel auf eine Webseite. Aber wenn die URL mit "#soetwas"
endet dann zeigt sie auf ein bestimmtes Element innerhalb dieser Seite. Der Browser
wird dann versuchen zum Zielelement zu scrollen und es am oberen Bildschirmrand zu platzieren.
Mit dem ':target' Selektor können Sie dem Zielelement einen bestimmten Style
zuweisen um dieses mehr hervorzuheben.
Aber es geht noch mehr. Sie können Elemente anzeigen lassen und ausblenden
je nachdem ob sie das Zielelement ausgewählt haben oder nicht. Weiter unten ist dafür ein Beispiel.
Es präsentiert ein kleines Menu mit 4 Items und jedes Item ist mit ein wenig Text verbunden.
Am Anfang wird jedoch noch kein Text angezeigt. Jedes Item besitzt einen Link mit einer Ziel-ID am Ende
(#item1, #item2...). Diese Elemente sind nur dann sichtbar wenn eine URL mit der jeweiligen Elemente-ID aufgerufen wurde.
Versuchen Sie auf die Menuitems zu klicken und schauen Sie auch auf die URL-Anzeige des Browserfensters.
Dies ist Element 1. Es sollte nicht sichtbar sein solange keinem Link
mit dem Zielelement '#item1' gefolgt wurde.
Wenn Sie zu Element 2 wechseln sollte dies hier sichtbar sein.
Dieses Element wird sichtbar wenn Sie auf den dritten Menupunkt geklickt haben.
Da das Element über eine echte URL erreichbar ist können Sie diese auch an beliebig
anderer Stelle im Web platzieren oder weitergeben.
Und so funktioniert es. Es gibt zwei wichtige Dinge zu beachten, den HTML Quellcode
und die CSS 'display' Eigenschaft. Zuerst wenden wir uns dem HTML Code zu. Er
beinhaltet einige Links und Elemente mit zugewiesenen IDs:
<p>
<a href="#item1">Element 1</a>
<a href="#item2">Element 2</a>
<a href="#item3">Element 3</a>
<a href="#default">Löschen</a>
<div class="items">
<p id="item1">... Element 1...
<p id="item2">... Element 2...
<p id="item3">...
<p id="default"><!-- Standardmässig wird kein Text angezeigt -->
</div>
Die CSS Regeln sorgen erst dafür das alle P Elemente innerhalb des DIVs
ausgeblendet werden. Anschliessend wird das P Element, welches das aktuell Gewählte ist,
wieder eingeblendet:
div.items p {display: none}
div.items p:target {display: block}
Das ist alles. Das Beispiel hier fügt dem Ganzen noch ein paar Abstände,
Farben und Umrandungen zu damit es mehr nach einem Menu aussieht. Sie können sich
den Quelltext dieser Seite ansehen wenn Sie wissen möchten was genau gemacht wurde.
In Wirklichkeit haben wir hier aber ':not(:target)' verwendet um dafür zu sorgen dass nur
CSS3 Browser die Elemente ausblenden werden. Ein besserer Weg ist also dieser hier:
div.items p:not(:target) {display: none}
div.items p:target {display: block}
