The :target-within
CSS pseudo-class represents an element that is a target element or contains an element that is a target. A target element is a unique element with an id
matching the URL's fragment. In other words, it represents an element that is itself matched by the :target
pseudo-class or has a descendant that is matched by :target
. (This includes descendants in shadow trees.)
/* Selects a <div> when one of its descendants is a target */
div:target-within {
background: cyan;
}
Syntax
Syntax not found in DB!
Examples
Highlighting an article
The :target-within
pseudo-class can be used to highlight the article if anything inside it has been directly linked to. The :target
pseudo-class is also being used to show which item has been targetted.
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: .25em;
}
/* Style italic elements within the target element */
p:target i {
color: red;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
Selectors Level 4The definition of ':target-within' in that specification. | Working Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
No compatibility data found. Please contribute data for "css.selectors.target-within" (depth: 1) to the MDN compatibility data repository.
See also
:target-within by Mozilla Contributors is licensed under CC-BY-SA 2.5.