CssHow-ToBeginner · 3 min read

How to Use :target in CSS for Styling Targeted Elements

The :target CSS pseudo-class selects an element that matches the current URL fragment identifier (the part after #). You use it to style or show content when a user clicks a link pointing to that element's ID.

📐

Syntax

The :target selector matches the element whose id matches the current URL fragment (the part after # in the URL). It is written as:

element:target — selects the targeted element.

This selector works dynamically when the URL changes to include a fragment.

css

:target {
  /* styles applied to the targeted element */
  background-color: yellow;
}

💻

Example

This example shows how clicking links changes the URL fragment and highlights the targeted section using :target.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>:target Example</title>
<style>
  section {
    padding: 1rem;
    margin: 1rem 0;
    border: 2px solid #ccc;
    transition: background-color 0.3s ease;
  }
  section:target {
    background-color: #ffeb3b;
    border-color: #fbc02d;
  }
  nav a {
    margin-right: 1rem;
    text-decoration: none;
    color: #007acc;
  }
  nav a:hover {
    text-decoration: underline;
  }
</style>
</head>
<body>
<nav>
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
  <a href="#section3">Section 3</a>
</nav>
<section id="section1">
  <h2>Section 1</h2>
  <p>This is the first section. Click the links above to highlight sections.</p>
</section>
<section id="section2">
  <h2>Section 2</h2>
  <p>This is the second section. It highlights when targeted.</p>
</section>
<section id="section3">
  <h2>Section 3</h2>
  <p>This is the third section. The highlight shows on target.</p>
</section>
</body>
</html>

Output

A webpage with three sections and links above. Clicking a link changes the URL fragment and highlights the corresponding section with a yellow background and darker border.

⚠️

Common Pitfalls

Missing IDs: The :target selector only works if the element has an id matching the URL fragment.
No effect without fragment: If the URL has no #id, no element is targeted.
Multiple targets: Only one element can be targeted at a time because URL fragments are unique.
Browser back/forward: The style changes dynamically with URL changes, so navigating history updates the target styles.

Example of a common mistake:

html

<!-- Wrong: No id on element -->
<div>
  <p>This won't be targeted because no id.</p>
</div>

<!-- Right: Add id to match URL fragment -->
<div id="example">
  <p>This will be targeted when URL ends with #example.</p>
</div>

📊

Quick Reference

:target selects the element whose id matches the URL fragment.

Use with id attributes.
Works dynamically as URL changes.
Great for tabs, modals, or highlighting sections.
Only one element targeted at a time.

✅

Key Takeaways

Use :target to style the element matching the URL fragment identifier.

Ensure the targeted element has a matching id attribute.

:target updates styles dynamically as the URL fragment changes.

Only one element can be targeted at a time because URL fragments are unique.

Common uses include highlighting sections, tabs, or showing modals without JavaScript.