CSS :target Selector

What You’ll Learn

The :target pseudo-class styles the element that matches the URL hash — the #section-id fragment. It is perfect for highlighting active sections, table-of-contents navigation, and even CSS-only modals.

Introduction

The CSS :target pseudo-class matches an element when its id attribute equals the URL fragment identifier — the part after # in the address bar. For example, when the URL is page.html#pricing, the element <section id="pricing"> becomes :target.

This is a powerful, JavaScript-free way to highlight the section a user navigated to via an anchor link. It is commonly used on documentation pages, single-page layouts, and long articles with a table of contents.

Definition and Usage

Apply :target styles to give visual feedback when a section is active. Typical patterns include changing background-color, adding a colored border-left, or applying a subtle box-shadow. Only one element can be :target at a time — whichever matches the current hash.

📝 Syntax

The syntax for the :target pseudo-class is:

:target {
  /* CSS properties */
}

You can also scope :target to specific elements:

.section:target {
  background-color: #eff6ff;
  border-left: 4px solid #2563eb;
}

How URL Fragments Work

Syntax Rules

• The targeted element must have an id that matches the URL hash exactly.
• Anchor links use href="#section-id" to activate :target.
• Only one element is :target at a time — the current hash match.
• Pair with scroll-margin-top so fixed headers do not cover targeted sections.
• Add html { scroll-behavior: smooth; } for animated scrolling between sections.

Related Topics

• HTML a tag — anchor links that set URL fragments
• :link — styles unvisited anchor links
• #id selector — targets elements by id in CSS
• scroll-behavior — smooth scrolling to hash targets
• ::selection — previous topic in this series

When to Use :target

:target shines in navigation-heavy layouts:

• Documentation pages — Highlight the section linked from a table of contents.
• Single-page layouts — Show which content block is currently active.
• FAQ pages — Expand or highlight the question matching the shared URL hash.
• CSS-only modals — Reveal a hidden panel when #modal is in the URL.
• Deep links — Let users bookmark or share links to specific page sections.

Examples Gallery

Practice :target with section navigation, table-of-contents highlighting, smooth scrolling, and a CSS-only modal.

<nav>
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
</nav>

<div id="section1" class="section">...</div>
<div id="section2" class="section">...</div>

<style>
  .section {
    padding: 1rem;
    background: #f8fafc;
    border-left: 4px solid transparent;
  }
  :target {
    background: #dcfce7;
    border-left-color: #16a34a;
  }
</style>

.chapter {
  padding: 1.25rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  background: #f8fafc;
  scroll-margin-top: 2rem;
}

.chapter:target {
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

html {
  scroll-behavior: smooth;
}

section:target h2 {
  color: #2563eb;
}

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

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
}

.modal:target {
  display: flex;
  align-items: center;
  justify-content: center;
}

💬 Usage Tips

• Use meaningful ids — id="pricing" is clearer in URLs than id="s3".
• Add scroll-margin-top — Prevents fixed headers from hiding the top of targeted sections.
• Combine with smooth scroll — html { scroll-behavior: smooth; } improves in-page navigation UX.
• Scope with classes — .section:target avoids styling unintended elements.
• Shareable deep links — Users can bookmark page.html#faq and land directly on that section.
• Subtle highlights — A light background shift or left border is often enough visual feedback.

⚠️ Common Pitfalls

• Missing id — Without a matching id, :target never applies.
• Duplicate ids — Invalid HTML; only the first match may receive :target.
• Case sensitivity — #Section does not match id="section" in HTML.
• Fixed header overlap — Targeted content can hide under sticky nav without scroll-margin-top.
• Modal accessibility — CSS-only modals need focus management; consider ARIA for production apps.
• Over-reliance on hash — Content must remain usable when users arrive without a hash.

♿ Accessibility

• Keyboard navigation — Anchor links are keyboard-focusable; ensure visible :focus styles on nav links.
• Do not hide content — :target should highlight, not be the only way to reveal essential information.
• Modal traps — CSS-only modals lack focus trapping; add JavaScript for complex dialog patterns.
• Skip links — Pair in-page nav with a skip-to-content link for screen reader users.
• Color contrast — Target highlight colors should keep text readable.

💡 Best Practices