CSS :target Pseudo-Class

CSS :target Pseudo-Class

The CSS :target pseudo-class selects an element identified by the current URL fragment. When a link points to an element's ID, :target allows CSS to highlight or otherwise style that element without requiring JavaScript. It is useful for in-page navigation, documentation sections, and direct links to specific content.

:target Syntax

:target {
  property: value;
}

The :target pseudo-class matches an element when it is the target of the current document's URL fragment.

Basic Example

:target {
  background-color: #eaf6fc;
}

Applies a light blue background to the targeted element.

Specific Element Type

section:target {
  border-left: 4px solid #006699;
}

Styles a targeted <section> element.

Class Selector

.content-panel:target {
  outline: 2px solid #006699;
}

Matches a targeted element that also has the class content-panel.

No Arguments

The pseudo-class is written as :target, without parentheses or arguments.

How :target Works

When a URL contains a fragment identifier, the browser can identify an element in the document using that fragment. The :target pseudo-class matches the element that is currently targeted.

Step 1 - Create an Element

<section id="examples">
  <h2>Examples</h2>
  <p>Example content.</p>
</section>

Step 2 - Create a Link

<a href="#examples">View Examples</a>

Step 3 - Add CSS

#examples:target {
  background-color: #eaf6fc;
}

Step 4 - Activate the Link

Clicking the link changes the document URL fragment to #examples. The section becomes the target and receives the matching styles.

Changing the Target

When the fragment changes to identify another element, the previous element normally stops matching :target.

No JavaScript Required

The browser handles fragment navigation and CSS selector matching automatically.

URL Fragments

A URL fragment is the portion of a URL beginning with the hash symbol (#). It identifies a location or resource-specific target within the document.

Example URL

https://www.example.com/tutorial.html#syntax

The fragment identifier is syntax.

Matching HTML

<h2 id="syntax">Syntax</h2>

The browser can target the heading because its ID matches the fragment identifier.

Matching CSS

#syntax:target {
  color: #006699;
}

Fragment Without a Match

If the fragment does not identify an element, there may be no element matching :target.

URL Without a Fragment

When the URL does not identify a fragment target, no ordinary element is selected through fragment targeting.

Fragment Navigation

Fragments can be included in bookmarks, navigation links, and links from other websites.

Anchor Links

Anchor links are commonly used to navigate to sections within the same document. They work naturally with :target.

HTML Example

<nav>
  <a href="#introduction">Introduction</a>
  <a href="#examples">Examples</a>
  <a href="#references">References</a>
</nav>
<section id="introduction">
  <h2>Introduction</h2>
</section>
<section id="examples">
  <h2>Examples</h2>
</section>
<section id="references">
  <h2>References</h2>
</section>

CSS Example

section:target {
  background-color: #eaf6fc;
  border-left: 4px solid #006699;
}

Clicking an anchor link highlights its corresponding section.

Unique IDs

Each target should have a unique ID so fragment navigation identifies the intended element.

Link Text

Use descriptive link text that clearly identifies the destination.

Browser History

Fragment navigation can create browser history entries, allowing users to navigate between previously selected sections.

Matching Elements

The :target pseudo-class is not limited to headings or sections. It can match many HTML elements when they are identified by the current URL fragment.

Heading

<h2 id="overview">Overview</h2>

h2:target {
  color: #006699;
}

Paragraph

<p id="important-note">Important information.</p>

p:target {
  background-color: #fff3cd;
}

Section

<section id="details">
  <h2>Details</h2>
</section>

section:target {
  outline: 2px solid #006699;
}

List Item

<li id="step-two">Step Two</li>

li:target {
  font-weight: bold;
}

Matching Requirement

The element must be the current fragment target. Simply having an ID does not make it match :target.

Highlighting Targeted Sections

Highlighting a targeted section helps users recognize where a fragment link has taken them.

Background Highlight

section:target {
  background-color: #eaf6fc;
}

Left Border

section:target {
  border-left: 4px solid #006699;
  padding-left: 12px;
}

Outline

section:target {
  outline: 2px solid #006699;
  outline-offset: 4px;
}

Heading Color

h2:target {
  color: #006699;
}

Highlight a Child Heading

section:target > h2 {
  color: #006699;
}

Styles the heading inside a targeted section rather than styling the section itself.

Readable Contrast

Choose colors that preserve sufficient contrast between text and background.

In-Page Navigation

The :target pseudo-class is useful for tutorials, documentation, reference pages, and other documents with multiple sections.

Navigation Example

<nav aria-label="Page sections">
  <a href="#html-section">HTML</a>
  <a href="#css-section">CSS</a>
</nav>
<section id="html-section">
  <h2>HTML</h2>
  <p>HTML content.</p>
</section>
<section id="css-section">
  <h2>CSS</h2>
  <p>CSS content.</p>
</section>

CSS Example

section:target {
  background-color: #eaf6fc;
  border-left: 4px solid #006699;
}

Current Target

The targeted section changes when the URL fragment changes.

Not a Scroll-Tracking Selector

The :target pseudo-class does not automatically identify whichever section is currently visible in the viewport.

Navigation Link Styling

The pseudo-class matches the destination element, not the link that points to it. Styling the corresponding navigation link generally requires additional selectors or JavaScript.

Direct Links and Bookmarks

Fragment links allow users to open a document at a specific section, including when arriving from another website or a saved bookmark.

Direct Link Example

<a href="tutorial.html#examples">View the Examples Section</a>

Destination Element

<section id="examples">
  <h2>Examples</h2>
  <p>Example content.</p>
</section>

Target Styling

#examples:target {
  background-color: #eaf6fc;
}

Page Reloads

If a page loads with a valid fragment identifier, the matching element can receive :target styling immediately.

Bookmark Compatibility

Use stable IDs for important sections so previously shared links continue to work when page content changes.

No Additional Script

Basic fragment navigation and target highlighting work without JavaScript.

Combining :target with Selectors

The :target pseudo-class can be combined with other CSS selectors to style the target or related elements.

Type Selector

section:target {
  background-color: #eaf6fc;
}

Class Selector

.reference-section:target {
  border-color: #006699;
}

Child Selector

section:target > h2 {
  color: #006699;
}

Descendant Selector

section:target p {
  font-weight: 500;
}

Adjacent Sibling Selector

h2:target + p {
  background-color: #fff3cd;
}

Styles the paragraph immediately following a targeted heading.

Using :has()

article:has(section:target) {
  border-color: #006699;
}

Styles an article containing a targeted section in browsers that support :has().

:target vs. :target-within

The :target and :target-within pseudo-classes are related, but they have different matching behavior.

Comparison

HTML Example

<article>
  <section id="details">
    <h2>Details</h2>
  </section>
</article>

Using :target

section:target {
  background-color: #eaf6fc;
}

Matches the section when the URL fragment is #details.

Using :target-within

article:target-within {
  border: 2px solid #006699;
}

Matches the article because it contains the targeted section, in browsers that implement :target-within.

Browser Compatibility

The :target pseudo-class is widely supported. The newer :target-within pseudo-class has more limited browser availability.

Alternative with :has()

article:has(:target) {
  border: 2px solid #006699;
}

Provides a related descendant-target selection pattern using :has().

JavaScript and :target

The :target pseudo-class works without JavaScript, but scripts can inspect and update the current URL fragment.

Read the Fragment

console.log(window.location.hash);

Returns the current fragment string, including the leading #.

Change the Fragment

window.location.hash = "examples";

Updates the fragment to #examples and can change the element matching :target.

Find the Current Target

const target = document.querySelector(":target");
console.log(target);

Returns the currently targeted element, or null if no element matches.

Listen for Fragment Changes

window.addEventListener("hashchange", () => {
  console.log("Fragment changed:", window.location.hash);
});

The hashchange event fires when the URL fragment changes through applicable navigation operations.

History API Considerations

Updating a URL with history.pushState() or history.replaceState() does not fire a hashchange event. Applications using the History API may need their own update handling.

CSS Remains Automatic

Once the document's fragment target changes, the browser updates :target matching without requiring manual class changes.

Scrolling Behavior

Fragment navigation often causes the browser to scroll to the targeted element. CSS can adjust the target's scroll position and the way scrolling occurs.

Scroll Margin

section[id] {
  scroll-margin-top: 80px;
}

Provides additional space above targeted sections, which can be useful when a fixed or sticky header would otherwise cover the heading.

Smooth Scrolling

html {
  scroll-behavior: smooth;
}

Requests smooth scrolling for applicable document navigation.

Reduced Motion

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

Disables requested smooth scrolling for users who prefer reduced motion.

Target Highlighting

section:target {
  outline: 2px solid #006699;
}

Highlighting the target can make it easier to identify after scrolling.

Scrolling and Matching Are Separate

The :target pseudo-class is determined by the fragment target, not by whether the element is currently visible on screen.

:target Specificity

The :target pseudo-class contributes a specificity of 0-1-0, like other standard pseudo-classes.

Specificity Examples

Specificity Example

section {
  background-color: #fff;
}
section:target {
  background-color: #eaf6fc;
}

The targeted section receives the more specific background declaration when other cascade factors are equal.

Combining Selectors

Type, class, ID, and other selectors contribute to the total specificity of the complete selector.

Using :where()

:where(section:target) {
  background-color: #eaf6fc;
}

The :where() function reduces the specificity of its complete argument to zero.

Practical Uses

The :target pseudo-class is useful anywhere a document provides links to specific sections or elements.

Documentation Sections

.documentation-section:target {
  border-left: 4px solid #006699;
}

Reference Headings

h2:target {
  color: #006699;
}

Important Notes

.note:target {
  background-color: #fff3cd;
}

FAQ Answers

.faq-item:target {
  outline: 2px solid #006699;
}

Highlighted Examples

.code-example:target {
  background-color: #eaf6fc;
}

Section Navigation

article section:target {
  border-left: 4px solid #006699;
  padding-left: 12px;
}

These styles can help users locate the content referenced by a link.

Limitations

The :target pseudo-class depends on fragment navigation and has several important limitations.

Requires a Fragment Target

The selector does not match an element merely because it has an ID. That element must be the current fragment target.

Not Based on Scroll Position

Scrolling manually to a section does not automatically make it match :target.

Does Not Select the Link

The pseudo-class matches the destination element rather than the anchor element that points to it.

Fragment Changes

When the fragment changes, the previously targeted element may stop matching.

Missing IDs

A fragment that does not identify an element cannot highlight that intended element.

Duplicate IDs

Duplicate IDs make documents invalid and can cause fragment navigation to behave unexpectedly.

Not a Visibility Test

An element can match :target even when it is outside the viewport.

No Automatic Disclosure Behavior

The selector changes styling but does not independently provide the interaction and accessibility behavior of a complete disclosure widget.

History Effects

Fragment navigation may affect the browser's history and scrolling position.

Best Practices

• Use unique and descriptive IDs for elements that can be targeted by fragment links.
• Provide meaningful link text for in-page navigation.
• Use :target to make the destination of a fragment link easier to identify.
• Choose highlighting styles that preserve text readability and contrast.
• Use scroll-margin-top when sticky headers may cover targeted headings.
• Respect reduced-motion preferences when enabling smooth scrolling.
• Do not rely on :target to track the currently visible section.
• Keep important fragment IDs stable so shared links continue to work.
• Do not use CSS-only fragment navigation as a replacement for necessary interactive widget behavior.
• Test direct links, browser history, and keyboard navigation.

:target Example

This example demonstrates how :target highlights the section selected by an anchor link. Click HTML, CSS, or JavaScript to change the URL fragment and highlight the matching section. Click Clear Target to remove the fragment.

HTML

<div class="target-demo">
  <nav aria-label="Example sections">
    <a href="#demo-html">HTML</a>
    <a href="#demo-css">CSS</a>
    <a href="#demo-javascript">JavaScript</a>
  </nav>
  <section id="demo-html">
    <h2>HTML</h2>
    <p>HTML defines the structure of a webpage.</p>
  </section>
  <section id="demo-css">
    <h2>CSS</h2>
    <p>CSS controls the appearance of a webpage.</p>
  </section>
  <section id="demo-javascript">
    <h2>JavaScript</h2>
    <p>JavaScript adds interactive behavior.</p>
  </section>
  <button type="button" id="clear-target">Clear Target</button>
</div>

CSS

.target-demo nav a {
  display: inline-block;
  margin: 0 8px 10px 0;
}
.target-demo section {
  margin: 8px 0;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
}
.target-demo section h2 {
  margin: 0 0 5px;
  font-size: 18px;
}
.target-demo section p {
  margin: 0;
}
.target-demo section:target {
  background-color: #eaf6fc;
  border-color: #006699;
}
.target-demo button {
  margin-top: 10px;
  padding: 8px 12px;
  cursor: pointer;
}

JavaScript

document.getElementById("clear-target").addEventListener("click", () => {
  history.pushState(null, "", window.location.pathname + window.location.search);
});

The JavaScript is used only for the Clear Target button. The anchor links and :target highlighting work without JavaScript.

Browser Result

Play in Editor

Note: Each navigation link changes the fragment of the editor document's URL. The matching section receives a blue border and background. The Clear Target button removes the fragment without reloading the document.

Browser Support

Baseline: Widely available. The :target pseudo-class has been supported for many years in Chrome, Edge, Firefox, Safari, and other major browsers.

For current compatibility information, visit Can I Use? for CSS Selectors Level 3 support information.

Specifications

The :target pseudo-class is defined in CSS Selectors Level 4 as a target pseudo-class.

Selectors Level 4 - The :target Pseudo-Class