:target CSS pseudo-class
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.
The :target CSS pseudo-class selects the target element of the document. When the document is loaded, the target element is derived using the document's URL fragment identifier.
/* Selects document's target element */
:target {
border: 2px solid black;
}
For example, the following URL has a fragment identifier (denoted by the # sign) that marks the element with the id of setup as the document's target element:
http://www.example.com/help/#setup
The following element would be selected by a :target selector when the current URL is equal to the above:
<section id="setup">Installation instructions</section>
Syntax
:target {
/* ... */
}
Description
When an HTML document loads, the browser sets its target element. The element is identified using the URL fragment identifier. Without the URL fragment identifier, the document has no target element. The :target pseudo-class allows styling the document's target element. The element could be focused, highlighted, animated, etc.
The target element is set at document load and history.back(), history.forward(), and history.go() method calls. But it is not changed when history.pushState() and history.replaceState() methods are called.
Note:
Due to a possible bug in the CSS specification, :target doesn't work within a web component because the shadow root doesn't pass the target element down to the shadow tree.
Examples
A table of contents
The :target pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents.
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;
}
Result
Specifications
| Specification |
|---|
| HTML # selector-target |
| Selectors Level 4 # target-pseudo |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
:target
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
- Using the :target pseudo-class in selectors
::target-text(for highlighting text fragments)