CSS/Selektoren/Pseudoklasse/target

Der Titel dieses Artikels ist mehrdeutig. Für

• das target-Attribut siehe HTML/Textauszeichnung/a target
• die JavaScript-Eigenschaft event.target.

Mithilfe der Pseudoklasse :target werden Elemente selektiert, die Ziel eines Verweises sind. Die CSS-Anweisungen gelten nur dann, wenn der Verweis gerade aktiviert wurde.

• 
• 
• 
• 
• 
• 

Selektieren von Linkzielen ansehen …

    :target {
      color: red;
      font-weight: bold;
     }

<p id="struktur">Strukturelle Pseudoklassen</p> <p id="target">Die Pseudoklasse target</p> <p>Linkliste</p> <ul> <li><a href="#struktur">Strukturelle Pseudoklassen</a></li> <li><a href="#target">Pseudoklasse target</a></li> <li><a href="#top">↑ nach oben zum Seitenanfang</a></li> </ul>

ansehen …

In diesem Beispiel wird jeweils das aktuell angesprungene Verweisziel in roter, fetter Schrift dargestellt.

Ein Klicken auf den unteren Link löst die Selektion wieder auf. Es wird nichts eingefärbt, da kein Element die id top besitzt.

Beachten Sie: Zur Aktivierung ist die Vergabe einer ID notwendig.

Anwendungsbeispiele

Infobox

Sie können die Pseudoklasse target verwenden, um eine Infobox auf- und zuzuklappen. Mit :target können Sie das Ziel eines (internen) Links selektieren. Ein interner Link auf eine mit CSS ausgeblendete Infobox, kann durch einen Klicken das Element sichtbar mittels :target sichtbar machen. Durch einen weiteren Klick auf einen anderen Link verliert die Infobox das :target und wird wieder unsichtbar.

Infobox mit :target ansehen …

.details {
  opacity: 0;
}
.details:target {
  opacity: 1;
}

<ul>
  <li>1. Eintrag <a href="#d1">Details</a></li>
  <!-- … -->
</ul>
<div id="d1" class="details">
  <h3>Details zum 1. Eintrag</h3>
  <p>Hier stehen so viele Details, dass man um das Scrollen nicht drum rum kommt.</p>
  <a class="close" id="c1" href="#c1" title="schließen">schließen</a>
</div>

Mithilfe der Pseudoklasse target wird das zunächst ausgeblendete Element sichtbar gemacht.

ansehen …

<a class="close" id="c1" href="#c1" title="schließen">schließen</a>

Der Linktext "Schließen" dient Nicht-Sehenden zur Identifizerung des Schließen-Buttons. Der Text wird perr CSS durch ein "X" ersetzt.

Problem der Infobox mit :target ist, dass die Browser-Historie vollgemüllt wird. Ein Klick auf die Pfeil-zurück-Taste bringt den Nutzer nicht auf die letzte Seite, sondern in den letzten internen Link. Das ist eigentlich unpraktisch.

Empfehlung: Verwenden Sie das details-Element mit durchgängiger Browser-Unterstützung, um solche Infoboxen ohne zusätzliches Markup und mit dem Standardverhalten der Browser zu realisieren.

Bildergalerie mit Popupboxen

In dieser Bildergalerie können Sie Bilder auswählen, die dann in Großansicht gezeigt werden:

Beispiel ansehen …

<ul id="galerie">
  <li><a tabindex="1" href="#bild1"><img src="dummy-1.jpg" alt="Spaß in der Sonne"></a></li>
  ...   
</ul>  

<figure id="bild1" class="details">
  <img src="dummy-1.jpg" alt="Spaß in der Sonne">
  <a class="close" id="c1" href="#c1" title="schließen">schließen</a>
  <figcaption>Spaß in der Morgensonne</figcaption>
</figure>

Die Listenelemente enthalten einen internen Seitenanker auf ein figure-Element. Wenn der Link ausgewählt wird, kann das angesprochene figure-Element mit der Pseudoklasse target selektiert und formatiert werden. Beim Anklicken des Schließen-Links wird ein anderes Element ausgewählt und das figure verliert sein „target“.

ansehen …

CSS

Beispiel ansehen …

@media all and (min-width: 35em) {

  li {
    width: 10em;
  }

  .details {
    position: absolute;
    right: 10%;
    top: 10%;
    background-color: #F1F3F4;
    border: 0.1em solid #3983ab;
    border-radius: 0 8px 8px;
    padding: 1em 1em .2em;
    width: 25em;
    max-height: 20em;
    overflow: auto;
    display: none;
  }

  .details img {
     width: 90%;
  }

  .details:target {
    display: block;
  }

  .close {
    width: 0;
    height: 0;
    border: 0; 
    text-shadow: none; 
    color: transparent;
  }

  .close::after {
     position: absolute;
     top: 1em;
     right: 1em;
     content: "X";
     color: white;
     background: #c32e04;
     font: bold 1em/150% Georgia, Times, serif;
     border: .1em solid #3983ab;
     border-radius: 0 8px 8px;
     display: block;
     text-align: center;
     width: 1.5em;
     height: 1.5em; 
     padding: .2em 0 0 0;
  }
}

Das figure-Element mit der class="details" wird im Ausgangszustand nicht angezeigt. Wenn der Link ausgewählt wird, kann das angesprochene figure mit der Pseudoklasse target selektiert und formatiert werden.

display: block; sorgt dafür, dass es jetzt sichtbar wird.

Beim Anklicken des Schließen-Links wird ein anderes Element ausgewählt und das figure verliert sein „target“.

ansehen …

Siehe auch

• HTML/Tutorials/Links/Seiteninterne Verweise
• Autorennen: CSS-Animation, ausgelöst durch :target
• unsichtbare Anker: Dialog-Box, die durch :target geöffnet wird.