:target-within
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die :target-within
CSS Pseudo-Klasse repräsentiert ein Element, das entweder ein Ziel-Element ist oder ein Ziel-Element enthält. Ein Ziel-Element ist ein einzigartiges Element mit einer passenden id
, die dem Fragment in der URL entspricht. Mit anderen Worten: Es repräsentiert ein Element, das entweder selbst von der :target
Pseudo-Klasse getroffen wird oder einen Nachkommen hat, der von :target
getroffen wird. (Dies umfasst Nachkommen in Shadow Trees.)
/* Selects a <div> when one of its descendants is a target */
div:target-within {
background: cyan;
}
Syntax
:target-within {
/* ... */
}
Beispiele
Hervorheben eines Artikels
Die :target-within
Pseudo-Klasse kann genutzt werden, um einen Artikel hervorzuheben, wenn irgendein Element innerhalb des Artikels direkt verlinkt wurde. Die :target
Pseudo-Klasse wird ebenfalls verwendet, um zu zeigen, welches Element gezielt 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>
</ol>
<article>
<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>
</article>
CSS
article:target-within {
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 |
---|
Selectors Level 4 # target-within-pseudo |
Browser-Kompatibilität
Derzeit wurde dieses Feature in keinem Browser implementiert.