kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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?

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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.

  • 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, :target hat daher seine Grenzen
  • Der Besucher springt bei einem Klick auf den Anker natürlich zu entsprechender Stelle
  • Der Browser-Support ist auf moderne Browser beschränkt

Quellen / Links

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

11 Kommentare

  1. Sebastian

    Verfasst am 1. März 2013 um 9: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.

    • Jonas Hellwig

      Verfasst am 1. März 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/

      • Sebastian

        Verfasst am 1. März 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

        Verfasst am 15. März 2013 um 18:58 Uhr.

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

  2. Sarah

    Verfasst am 1. März 2013 um 9:40 Uhr.

    Huhu,

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

    Lieben Gruß aus Kölle
    Sarah

  3. Nico

    Verfasst am 1. März 2013 um 17:13 Uhr.

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

  4. Jürgen

    Verfasst am 12. Mai 2013 um 19:24 Uhr.

    Danke Jonas, endlich habe ich diesen Selektor wirklich verstanden!

  5. Ida Ebkes

    Verfasst am 15. März 2014 um 8:42 Uhr.

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

  6. Nico

    Verfasst am 27. Juni 2014 um 9:04 Uhr.

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

  7. Dominik

    Verfasst am 12. November 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

  8. Asqiir

    Verfasst am 16. Oktober 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!

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.