: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-Fragmentbezeichners des Dokuments ermittelt.
/* Selects document's target element */
:target {
border: 2px solid black;
}
Zum Beispiel hat die folgende URL einen Fragmentbezeichner (gekennzeichnet durch das #-Zeichen), der das Element mit der id von setup als Zielelement des Dokuments markiert:
http:/help/#setup
Das folgende Element würde von einem :target-Selektor ausgewählt, wenn die aktuelle URL der oben genannten entspricht:
<section id="setup">Installation instructions</section>
Syntax
:target {
/* ... */
}
Beschreibung
Wenn ein HTML-Dokument geladen wird, legt der Browser sein Zielelement fest. Das Element wird mithilfe des URL-Fragmentbezeichners identifiziert. Ohne den URL-Fragmentbezeichner 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 und bei den Aufrufen der Methoden history.back(), history.forward() und history.go() festgelegt. 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 eines Webkomponenten, da der ShadowRoot das Zielelement nicht an den Shadow-Baum weitergibt.
Beispiele
Ein Inhaltsverzeichnis
Die :target-Pseudoklasse kann verwendet werden, um den Abschnitt einer Seite hervorzuheben, auf den von einem Inhaltsverzeichnis aus verlinkt wurde.
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
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 |