: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 repräsentiert ein einzigartiges Element (das Zielelement) mit einer id, die mit dem Fragment der URL übereinstimmt.

css
/* Selects an element with an ID matching the current URL's fragment */
:target {
  border: 2px solid black;
}

Zum Beispiel hat die folgende URL ein Fragment (gekennzeichnet durch das #-Zeichen), das auf ein Element mit dem Namen section2 verweist:

url
http://www.example.com/index.html#section2

Das folgende Element würde durch einen :target-Selektor ausgewählt werden, wenn die aktuelle URL der obigen entspricht:

html
<section id="section2">Example</section>

Syntax

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

Hinweis: Aufgrund eines möglichen Fehlers in der CSS-Spezifikation funktioniert :target nicht innerhalb eines Web Components, weil die Shadow-Root das Zielelement nicht in den Shadow-Baum weitergibt.

Beispiele

Ein Inhaltsverzeichnis

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

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 link
  above to try out!
</p>
<p id="p2">
  This is <i>another paragraph</i>, also accessible from the links 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 Standard
# selector-target
Selectors Level 4
# the-target-pseudo

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch