: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.

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
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`:target`	1	12	1	9.5	1.3	18	4	10.1	2	1.0	2