Die CSS-Pseudoklasse :target – Funktion & Beispiele

css-target

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?

Modernes Webdesign

Neue Workflows, Techniken und Designideen – inkl. Rapid Prototyping, Responsive Design und Sass.

In unserem Shop kaufen
Signierte DVD, keine Versandkosten

Bei Amazon bestellen
Standard-Version

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