:target CSS-Pseudoklasse für ein Sprungziel
Pseudoklassen erreichen Elemente, die es im HTML-Markup nicht direkt gibt und die nicht von einem der üblichen Selektoren wie class oder id angesprochen werden können. :target erreicht ein Sprungziel innerhalb einer Seite, einen in internen Anker.
Die Adresse oder URI (Universal Resource Identifier) einer Webseite besteht aus mehreren Elementen vom https:// ganz am Anfang bis hin zum #-Part für eine interne Sprungadresse. Der # (Hash)-Teil einer Adresse ist eine interne Adresse innerhalb einer Webseite, der auch als internes Sprungziel, Fragment-Identifikator oder Anker bezeichnet wird.
<a href="#morelinks">Viel viel weiter unten</a>
Der Hash-Teil einer Adresse ist eine alte Technik, um ein Sprungziel innerhalb einer langen Seite ohne Scrollen zu erreichen.
Andere Bespiele für Pseudoklassen sind :not und :lang sowie :hover und :focus, die es als Element nur gibt, wenn der Benutzer gerade mit der Maus über einem Element hovert oder ein Eingabefeld aktiviert hat.
CSS mit :target
Das Sprungziel oder target kann auf einer anderen Seite oder der aktuellen Seite sitzen. Oh la la, CSS einer Seite kann auf die Elemente einer anderen Seite einwirken!
- img flip mit Bildwechsel: Vorderseite, Rückseite
- Bild über Text einblenden
- Links zu ähnlichen Themen
<a href="/css/transitions.html#img-flip">img flip mit Bildwechsel: Vorderseite, Rückseite</a> <a href="/css/transitions.html#img-overlay">Bild über Text einblenden</a> <a href="#morelinks">Links zu ähnlichen Themen</a>
:target weist dem Element CSS-Stile zu, die nur angewendet werden, wenn die URI mit dem Hash – # – Zusatz aufgerufen wurde.
<style>
section#img-flip:target h2,
section#img-overlay:target h2 {
background: silver;color:white;padding-left:8px
}
</style>
Da ist aber so gar kein CSS-Stil sichtbar? Stimmt. Erst wenn ein User dem Link folgt, wird der Effekt sichtbar.
:target für CSS-Transition
Cheesecake cake marshmallow ice cream.
Danish cake dragée sesame snaps chocolate. Cotton candy powder sweet tiramisu marzipan cake cake croissant pie.
Chocolate cake halvah croissant topping apple pie candy sweet carrot cake.
Das HTML-Markup nutz einen Link mit href="#mylink", der Inhalt des Akkordeons wird durch eine gleichnamige ID identifiziert.
<div class="accordion">
<header><a href="#sesame">Sesame snaps croissant</a></header>
<div class="board" id="sesame">
<p>Cheesecake cake marshmallow …</p>
</div>
<header><a href="#cotton"> Cotton candy powder </a></header>
<div class="board" id="cotton">
<p>Danish cake dragée sesame snaps …</p>
</div>
…
</div>
height: 0 und max-height:0 verbergen ein zusammengeklapptes Element des Akkordeons. Wenn ein Akkordeon-Link geklickt wird, um ein Board zu öffnen, wird height auf auto und max-height auf eine übergroße Höhe gesetzt. So wird das Board weich durch eine CSS-Transition geöffnet, denn eine Transition von height: 0 auf height auto würde nicht funktionieren.
.accordion .board {
padding: 0;
margin: 0;
height: 0;
max-height: 0px;
overflow: hidden;
transition: max-height 1s ease-out;
}
.accordion .board:target {
height: auto;
max-height: 800px;
}
Quelle: Better CSS-only tabs, with :target
So einfach das Akkordeon mit :target durch reines CSS ohne Javascript ist, so gibt es doch Haken: Der folgende Inhalt wird durch das Öffnen der Tabs auf- und abgezogen. Das lässt sich nur durch die Angabe einer maximalen Höhe vermeiden.
Die Alternative wäre dann doch wieder ein Javascript, dass die maximale Höhe der Tabs berechnet.
Zudem springt das Akkordeon mit jedem Klick an den Seitenanfang. Auch hier müsste wieder Javascript einschreiten, um das natürliche Verhalten des target-Selektors zu unterdrücken. :target als Initiator von CSS Transitionen verfälscht den Sinn von internen Links. Mehr dazu bei Stackoverflow: How to prevent a click on a '#' link from jumping to top of page?.
Besser und natürlicher als :target agieren input type checkbox und input type radio: Das ist der Checkbox-Hack: CSS Tabs ohne Javascript und CSS Accordion ohne Javascript.