:target
Die :target CSS Pseudoklasse repräsentiert ein einzigartiges Element (das Zielelement) mit einer id, die mit dem Fragment der URL übereinstimmt.
/* 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:
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:
<section id="section2">Example</section>
Syntax
: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
<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
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