Der CSS3 Selector :target hat ein paar interessante use cases. Einer ist, dass man Ankerziele hervorhebt. (http://labs.jooon.de/css/selectors/target/) Das :target macht nichts anderes als zu checken, ob die URL ein Hashwert enthält und dazu ein passende ID existiert. mit dem :target wird dann das entsprechende Element angesprochen. :target dient also als eine Art "dynamischer" Selector für IDs. Neben dem Hervorheben von Anchorlinks gibt es noch weitere spannende Anwendungsmöglichkeiten. So ist es beispielsweise möglich Elemente rein durch CSS und HTML ein und auszublenden, ohne dass sie direkt verbunden sind.

Anchor hervorheben

Tabs mit CSS

See the Pen CSS3 :target Demo (Tabs) by John (@herr_john) on CodePen.

Mehr dazu: http://www.w3.org/TR/css3-selectors/#target-pseudo

Neuen Kommentar schreiben