Die CSS-Pseudoklasse :target – Funktion & Beispiele
Von: Jonas In diesem Beitrag erfahrt ihr wie die CSS-Pseudoklasse :target funktioniert.
Mit Hilfe der CSS-Pseudoklasse :target können recht komplexe Techniken ohne den Einsatz von JavaScript realisiert werden. Häufig wird :target in letzter Zeit im Zusammenhang mit Slider- oder Off-Canvas-Effekten im responsive Design erwähnt. Doch wie funktioniert die Pseudoklasse überhaupt?
Wofür braucht man :target?
Mit :target könnt ihr prüfen, ob ein Ankeridentifikator angesprochen wurde. Das ist zum Beispiel der Fall wenn ihr einen Link auf eine ID setzt oder einen Anker verwendet. Das folgende Beispiel zeigt einen Link dessen Ziel eine ID ist. Sofern sich ein Element mit dieser ID auf der Seite befindet, springt die Ansicht zu dieser Stelle.
<a href="#test">Klick mich</a> Wenn der Link angeklickt wird, verändert sich auch die URL der Seite. Die Adresse https://kulturbanause.de würde nach dem Klick so aussehen: https://kulturbanause.de#test. Daran ist auch im nachhinein erkennbar, dass dieser Ankeridentifikator gerade angesprochen wurde.
Mit der Pseudoklasse :target kann nun geprüft werden, ob sich eine ID gerade im Ziel befindet und folglich in der Adressleiste steht. :target funktioniert allerdings nur, wenn die ID auf der Seite auch existiert.
Wir erweitern den Beispiel-Code daher ein wenig und fügen die ID in den body ein:
<body id="test">
<a href="#test">Klick mich</a>
</body>Jetzt prüfen wir mit CSS, ob die ID #test angesprochen wurde. Wenn das der Fall ist, wird der Hintergrund des Elements mit dieser ID (in diesem Fall der body selbst) rot eingefärbt.
#test:target { background:red; }Wenn wir das Beispiel um einen zweiten Hyperlink ohne Ziel erweitern, kann der Effekt zurückgesetzt werden.
<body id="test">
<a href="#test">Klick mich</a><br />
<a href="#">Reset</a>
</body>Eine Live-Demo dieses Beispiels könnt ihr euch hier anschauen:
Mehrere Elemente verändern
Wir haben die ID auf den body gesetzt, was es einfach macht auch untergeordnete Elemente zu verändern. Ich habe einen div und eine h1 hinzugefügt und verändere nun Position, Größe und Farbe mit Hilfe der übergeordneten ID des body.
Eine Live-Demo könnt ihr euch hier anschauen:
<body id="test">
<a href="#test">Klick mich</a><br />
<a href="#">Reset</a>
<div>
<h1>kulturbanause.de</h1>
</div>
</body>h1, div {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
h1 {font-size:100%;}
div {
position: absolute;
top: 50px;
left: 0;
padding: 10px 20px;
background:#eee;
}
#test:target div {
background: #0C0;
left: 200px;
}
#test:target h1 { font-size: 200%;}Off-Canvas-Navigation mit :target
Das folgende Beispiel setzt den Off-Canvas-Effekt mit Hilfe von :target um. Es geht mir darum die elementare Funktion zu verdeutlichen. Der Code kann nicht ohne Optimierung für Live-Projekte verwendet werden.
Eine Live-Demo des Beispiels findet ihr hier:
<body id="openNav">
<div class="navMain">
</div>
<div id="content">
<a href="#openNav" id="openBtn">Open Navi</a>
<a href="#closeNav" id="closeBtn">Close Navi</a>
<h1>Off-Canvas mit :target</h1>
<p>Hier steht der Inhalt</p>
</div>
</body>* {
margin:0;
padding:0;
}
html, body {
height:100%;
overflow-x:hidden;
}
.navMain, #content {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.navMain {
width:240px;
height:100%;
position:fixed;
left:-240px;
background:gray;
}
#content {
margin-left:20px;
padding-top:20px;
}
#openBtn,
#closeBtn {
width:40px;
height:40px;
margin:0 0 20px 0;
color:white;
padding:10px;
}
#openBtn {
background:green;
display:block;
}
#closeBtn {display:none;}
/* if nav open */
#openNav:target .navMain {left:0;}
#openNav:target #content {
margin-left:260px;
position:fixed;
}
#openNav:target #openBtn {display:none;}
#openNav:target #closeBtn {
display:block;
background:red;
}Toggle-Navigation mit CSS :target
Ich habe in einem zweiten Beispiel noch eine vertikale Navigationslösung für responsive Websites mit Hilfe von :target umgesetzt. Da die Funktionsweise den oben beschriebenen Beispielen entspricht, verlinke ich hier nur die Demo.
Nachteile
Mit :target lassen sich interessante Effekte erzeugen, doch die Technik hat auch Nachteile.
- Die URL muss verändert werden und der Effekt funktioniert nur, wenn hier eine Anpassung möglich ist
- Der Effekt basiert auf IDs, mit Klassen funktioniert es nicht. Es ist aber nicht möglich mehrere IDs auf ein Objekt anzuwenden,
:targethat daher seine Grenzen - Der Besucher springt bei einem Klick auf den Anker natürlich zu entsprechender Stelle
„Das letzte Beispiel (Toggle-Navigation mit CSS :target) funktioniert bei mir in aktuellen Browsern nicht“, wollte ich gerade schreiben, bis ich gerade bemerkte, dass es sehr wohl funktioniert, wenn die Fensterbreite ausreichend schmal ist.
p.s.: Die Kritik von Steafn ist für mich nicht nachvollziehbar. Man kann sich die Codebeispiele ja herunterkopieren und damit herumspielen, Teile für sich einfach mal weglassen. Und wenn man etwas nicht versteht, hat man gleich einen Ansporn es zu repetitieren oder sich anzulesen.
Sehr geehrter Herr Hellwig,
als erstes möchte ich Sie beglückwünschen, dass Sie tatsächlich meinen kritischen Kommentar veröffentlicht haben. Das findet man heutzutage nicht oft.
Der überflüssige Kram bezieht sich auf die Animationen. Und Animationen sind in Bezug auf die Pseudoklasse „target“ meines Erachtens völlig überflüssig. Sollten Sie einer anderen Meinung sein würde ich mich über Ihre Antwort hier, in Ihrer Kommentarfunktion, freuen.
Versehen Sie doch mal bitte jeden Ihrer CSS – Befehle mit Kommentaren, was sie bewirken und (was ich besonders wichtig finde) warum man sie nicht weglassen kann. Denn die Einsparung von Code sollte doch im Interesse aller liegen.
Ich hoffe hier in diesm Forum von Ihnen zu hören (lesen)
MfG
Stefan
Hallo Stefan, ich teile grundsätzlich deine Meinung was die Einsparung von Code betrifft. Was die Darstellung von Code-Beispielen angeht, werden wir allerdings nicht alles kommentieren. Das erschwert die Lesbarkeit erheblich – vor allem wenn man Vorkenntnisse hat. Das trifft auf die allermeisten Besucher zu.
Viele Grüße Jonas
Hallo,
leider kann ich der Mehrheit hier nicht zustimmen, das der Artikel gelungen ist.
Verständlich mag das vielleicht für die Leute sein, die den ganzen Tag nichts anderes machen als sich mit CSS zu beschäftigen. Für mich, der jeden Tag 8 Stunden arbeiten geht, ist das Ganze ziemlich verwirrend.
Wäre es nicht möglich, als Erstes den ganzen überflüssigen Kram weg zu lassen und sich auf das Notwendige zu konzentrieren? In diesem Fall die Animationen. Desweiteren wäre es hilfreich hinter jedem CSS – Befehl einen Kommentar einzufügen, der die Auswirkung beschreibt.
Es ist mir klar das kritische Kommentare nicht veröffentlicht werden, aber vielleicht ist das ja mal ein Denkanstoß
Vielen Dank für deinen Kommentar. Der aus deiner Sicht »überflüssige Kram« beschreibt jedoch die Kernfunktion von CSS :target. Im Verlauf der Artikels wird dann anhand eines Beispiels erklärt, das mit :target auch Animationen möglich sind.
Sehr guter Artikel!
Ihr seid die ersten, bei denen ich das Thema (als einigermaßen erfahrener HTML- und CSS-Nutzer auch verstanden habe. Weiter so!
Hallo Jonas,
tolle Sache das mit der Pseudoklasse target – funktioniert soweit ganz prima.
Nur ein Problem habe ich: bei mir hängt er den „hashtag-Link“ immer an die Standard-URL und nicht an die, auf der ich mich gerade befinde.
Beispiel:
#machdieboxauf { …}
Anstatt nun
http://www.example.com/hier-bin-ich-gerade.html#machdieboxauf
macht er immer
http://www.example.com/#machdieboxauf
Wie kann man denn die aktuelle URL beibehalten? Hast du da eine Idee, wie man das lösen kann?
Grüße
Dominik
Eventuell ist da ein base-target gesetzt? CMSe machen das gern.
(PS: ich weiß, dass die Frage lang her ist, aber vielleicht hat ja noch jemand das gleiche Problem)
So einfach das es wieder toll ist ;)
Danke für den prima Artikel!
Perfekter Artikel, gut erklärt und mit Live-Demos, vielen Dank!
[…] OffCanvas: Elmastudio – OffCanvas Layouts Kulturbanause – Die CSS Pseudoklasse target […]
Danke Jonas, endlich habe ich diesen Selektor wirklich verstanden!
Das ist ein sehr interessanter Artikel. Hane ich damit noch nie beschäftigt und es sofort verstanden.
Huhu,
danke für den coolen Beitrag! Habe wieder etwas dazu gelernt :)
Lieben Gruß aus Kölle
Sarah
Das ist wieder ein sehr interessanter Artikel!
Besonders das mit dem OFF-CANVAS. Super wäre es, wenn das ganze auch in den alten Internet Explorer funktioniert würde. Zum Beispiel durch ein Skript. Das wäre prima.
Probier mal folgendes Tool aus. Das Rüstet Pseudoklassen im IE 6-8 nach. http://best-webdesign-tools.com/resources/selectivizr/
Super! Vielen Dank für den Hinweis!
Damit kann man dann ein Layout erstellen, das nur bei Smartphones das OFF-CANVAS-Layout anwendet und trotzdem schnell geladen ist, weil hierfür kein Skript erforderlich ist.
Im Internet Explorer 8 funktioniert das Ganze! Eine klasse Beitrag!