CSS : target Selektor

CSS target Selektor Stile für das Ziel eines Links

Die Adresse oder URI (Universal Resource Identifier) besteht aus mehreren Elementen vom https:// ganz am Anfang bis hin zum #part. Der # (Hash)-Teil einer Adresse ist eine interne Adresse innerhalb einer Webseite, der auch als internes Sprungziel, Fragment-Identifikator oder Anker bezeichnet wird.

Der : target -Selektor ist eine CSS-Pseudoklasse und weist dem Zielelement Stile zu.

Mit Hilfe von Pseudoklassen können Elementen, die es im HTML-Markup nicht direkt gibt und die nicht von einem der üblichen Selektoren wie class oder id angesprochen werden können, CSS-Eigenschaften zugewiesen werden.

https://eineseite.de/css/target.html#main

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.

<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> 

:target für CSS-Transition

Sesame snaps croissant

Cheesecake cake marshmallow ice cream.

Cotton candy powder

Danish cake dragée sesame snaps chocolate. Cotton candy powder sweet tiramisu marzipan cake cake croissant pie.

Soufflé dragée gingerbread

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.

: target