CSS :target Pseudo-class

Definition and Usage

The :target pseudo-class matches the document’s target element — the one whose id equals the URL fragment after #.

Example: https://example.com/help#setup makes <section id="setup"> match :target. Use it to highlight in-page jumps, TOC sections, or simple CSS-only panels.

CSS Syntax

Often typed as p:target, section:target, or #panel:target.

Selector Forms

How to Use :target

Give the destination an id, link to it with #, then style :target.

1. Add a unique id on the destination element.
2. Link with href="#that-id".
3. Write :target (or p:target) styles.
4. Click the link — the matching element becomes the target.

Live Preview

Simulate a URL fragment change. In a real page, clicking #one / #two would make that block match :target.

CSS Examples

Each snippet focuses on :target. Use Try It Yourself for a live editor (click the hash links there).

<style>
  p:target {
    background: #fef08a;
  }
</style>

<a href="#p1">Jump to paragraph</a>
<p id="p1">This paragraph becomes the target.</p>
<p>Not targeted.</p>

<style>
  section:target {
    outline: 2px solid #2563eb;
    background: #eff6ff;
  }
</style>

<a href="#setup">Go to setup</a>
<section id="setup">
  <h2>Setup</h2>
  <p>Install steps live here.</p>
</section>

<style>
  #info {
    display: none;
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
  }

  #info:target {
    display: block;
  }
</style>

<a href="#info">Open info</a>
<div id="info">
  Panel content
  <a href="#">Close</a>
</div>

Key Takeaways