Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Die CSS-Pseudoklasse :target – Funktion & Beispiele

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 http://kulturbanause.de würde nach dem Klick so aussehen: http://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:

Beispiel öffnen

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:

Beispiel öffnen

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

Beispiel öffnen

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

Beispiel öffnen

Nachteile

Mit :target lassen sich interessante Effekte erzeugen, doch die Technik hat auch Nachteile.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 18 Kommentare

  1. Günther
    schrieb am 17.02.2022 um 09:58 Uhr:

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

    Antworten
  2. Stefan
    schrieb am 11.11.2019 um 00:15 Uhr:

    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

    Antworten
    • Jonas Hellwig
      schrieb am 18.11.2019 um 17:02 Uhr:

      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

      Antworten
  3. Stefan
    schrieb am 09.11.2019 um 10:55 Uhr:

    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ß

    Antworten
    • Jonas Hellwig
      schrieb am 09.11.2019 um 13:37 Uhr:

      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.

      Antworten
  4. Asqiir
    schrieb am 16.10.2016 um 10:44 Uhr:

    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!

    Antworten
  5. Dominik
    schrieb am 12.11.2014 um 12:07 Uhr:

    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

    Antworten
    • Wanst
      schrieb am 27.03.2019 um 09:56 Uhr:

      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)

      Antworten
  6. Nico
    schrieb am 27.06.2014 um 09:04 Uhr:

    So einfach das es wieder toll ist ;)
    Danke für den prima Artikel!

    Antworten
  7. Ida Ebkes
    schrieb am 15.03.2014 um 08:42 Uhr:

    Perfekter Artikel, gut erklärt und mit Live-Demos, vielen Dank!

    Antworten
  8. Die 5 wichtigsten Webdesign Trends 2013 / 2014 | Skydreamsong
    schrieb am 17.09.2013 um 09:50 Uhr:

    […] OffCanvas: Elmastudio – OffCanvas Layouts Kulturbanause – Die CSS Pseudoklasse target […]

    Antworten
  9. Jürgen
    schrieb am 12.05.2013 um 19:24 Uhr:

    Danke Jonas, endlich habe ich diesen Selektor wirklich verstanden!

    Antworten
  10. Nico
    schrieb am 01.03.2013 um 17:13 Uhr:

    Das ist ein sehr interessanter Artikel. Hane ich damit noch nie beschäftigt und es sofort verstanden.

    Antworten
  11. Sarah
    schrieb am 01.03.2013 um 09:40 Uhr:

    Huhu,

    danke für den coolen Beitrag! Habe wieder etwas dazu gelernt :)

    Lieben Gruß aus Kölle
    Sarah

    Antworten
  12. Sebastian
    schrieb am 01.03.2013 um 09:35 Uhr:

    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.

    Antworten
    • Jonas Hellwig
      schrieb am 01.03.2013 um 10:30 Uhr:

      Probier mal folgendes Tool aus. Das Rüstet Pseudoklassen im IE 6-8 nach. http://best-webdesign-tools.com/resources/selectivizr/

      Antworten
      • Sebastian
        schrieb am 01.03.2013 um 13:46 Uhr:

        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.

      • Sebastian
        schrieb am 15.03.2013 um 18:58 Uhr:

        Im Internet Explorer 8 funktioniert das Ganze! Eine klasse Beitrag!

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →