:target

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die :target CSS Pseudoklasse wählt das Zielelement des Dokuments aus. Wenn das Dokument geladen wird, wird das Zielelement mithilfe des URL-Fragmenteidentifikators des Dokuments bestimmt.

css
/* Selects document's target element */
:target {
  border: 2px solid black;
}

Zum Beispiel hat die folgende URL einen Fragmenteidentifikator (angezeigt durch das #-Zeichen), der das Element mit der id setup als Zielelement des Dokuments kennzeichnet:

url
http://www.example.com/help/#setup

Das folgende Element würde von einem :target-Selektor ausgewählt werden, wenn die aktuelle URL der oben genannten entspricht:

html
<section id="setup">Installation instructions</section>

Syntax

css
:target {
  /* ... */
}

Beschreibung

Wenn ein HTML-Dokument geladen wird, setzt der Browser das Zielelement. Das Element wird mithilfe des URL-Fragmenteidentifikators identifiziert. Ohne den URL-Fragmenteidentifikator hat das Dokument kein Zielelement. Die :target-Pseudoklasse ermöglicht es, das Zielelement des Dokuments zu stylen. Das Element könnte fokussiert, hervorgehoben, animiert usw. werden.

Das Zielelement wird beim Laden des Dokuments sowie bei Aufrufen der Methoden history.back(), history.forward() und history.go() gesetzt. Es wird jedoch nicht geändert, wenn die Methoden history.pushState() und history.replaceState() aufgerufen werden.

Hinweis: Aufgrund eines möglichen Fehlers in der CSS-Spezifikation funktioniert :target nicht innerhalb einer Webkomponente, da die Shadow Root das Zielelement nicht in den Shadow-Baum weiterleitet.

Beispiele

Ein Inhaltsverzeichnis

Die :target-Pseudoklasse kann verwendet werden, um den Teil einer Seite hervorzuheben, der aus einem Inhaltsverzeichnis verlinkt wurde.

HTML

html
<h3>Table of Contents</h3>
<ol>
  <li><a href="#p1">Jump to the first paragraph!</a></li>
  <li><a href="#p2">Jump to the second paragraph!</a></li>
  <li>
    <a href="#nowhere">
      This link goes nowhere, because the target doesn't exist.
    </a>
  </li>
</ol>

<h3>My Fun Article</h3>
<p id="p1">
  You can target <i>this paragraph</i> using a URL fragment. Click on the first
  link above to try out!
</p>
<p id="p2">
  This is <i>another paragraph</i>, also accessible from the second link above.
  Isn't that delightful?
</p>

CSS

css
p:target {
  background-color: gold;
}

/* Add a pseudo-element inside the target element */
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/* Style italic elements within the target element */
p:target i {
  color: red;
}

Ergebnis

Spezifikationen

Specification
HTML
# selector-target
Selectors Level 4
# target-pseudo

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:target

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch