How Does the CSS :target Pseudo-Class Work?

The CSS :target pseudo-class selects and styles a unique element on a webpage whose id attribute matches the fragment identifier (hash) in the current URL. In document navigation, it allows developers to create reactive visual states—such as highlighting linked content sections, building pure CSS tabs, or managing accessible modal overlays—strictly through declarative styling without relying on JavaScript event listeners.

The Underlying Mechanism

When a user interacts with an anchor link pointing to an in-page fragment (for example, <a href="#chapter-2">Chapter 2</a>), the browser updates the URL to include #chapter-2 and scrolls the viewport to the element with id="chapter-2".

The :target pseudo-class activates simultaneously on that specific target element. As long as the URL fragment matches the element's identifier, the styles defined under the :target selector remain applied. When the URL hash changes or is cleared, the selector deactivates automatically.

Common Navigation Use Cases

Content Highlighting and Reading Aids

In long-form documentation, legal texts, or multi-chapter guides, users frequently navigate via a Table of Contents. Using :target ensures that when a user jumps to a section, visual emphasis—such as background color changes, subtle animations, or border accents—immediately clarifies where their reading context begins.

section:target {
  background-color: #f0f7ff;
  border-left: 4px solid #0066cc;
  padding-left: 1rem;
  transition: background-color 0.3s ease;
}

Pure CSS Modals and Lightboxes

The pseudo-class enables lightweight dialogs and image previews without JavaScript:

  1. A modal container is hidden by default using display: none or opacity: 0.
  2. An anchor link points to the modal's id (e.g., <a href="#terms-modal">View Terms</a>).
  3. The :target rule switches the visibility to active:
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

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

To close the modal, an internal link points to an empty hash (href="#") or an alternative section, removing the target state.

Off-Canvas Menus and Mobile Drawers

Mobile navigation menus can toggle open when an icon linking to #mobile-nav is clicked, expanding the navigation drawer into view. A dismiss link pointing back to # or #main-content collapses the menu seamlessly.

Benefits in Modern Web Development

  • Zero Script Overhead: Interactive UI states execute entirely within the browser's native rendering pipeline, reducing bundle size and execution latency.
  • Deep Linking Support: Because the state is tied directly to the URL fragment, users can bookmark, share, or refresh links and retain the exact focused UI state.
  • Browser History Integration: Every transition using :target integrates with browser history, enabling standard navigation controls like the "Back" and "Forward" buttons to step through previously focused elements.

Usability and Accessibility Considerations

While :target provides robust layout capabilities, implementing it effectively requires careful attention to assistive technologies and viewport behavior.

  • Scroll Margin: Fixed headers often obscure target elements when scrolled into view. Combining :target with scroll-margin-top ensures anchored elements remain fully visible below sticky navigation bars.
  • Focus Management: Moving the URL hash to an element does not automatically move keyboard focus in every browser configuration. Setting tabindex="-1" on target containers helps ensure screen readers and keyboard users track the jump properly.
  • History Clutter: For transient interactions like tooltips or minor dropdowns, relying on :target may clutter the user's browser history with unnecessary hash entries. It remains best suited for genuine document milestones and content navigation.