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

Usability and Accessibility Considerations

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