jQuery :target Selector

What You’ll Learn

The :target selector matches the element whose id equals the URL hash fragment — e.g. #foo highlights the element with id="foo". Available since jQuery 1.9; standard CSS pseudo-class.

Introduction

Long documentation pages, FAQs, and wikis use in-page anchor links like <a href="#pricing"> so readers jump straight to a section. The browser updates the URL hash, and the element with matching id becomes the current target.

jQuery’s :target pseudo-class (since 1.9) selects that hash-referenced element. Official documentation example: for URI https://example.com/#foo, the expression $("p:target") selects the <p id="foo"> element. The same pseudo-class works in CSS stylesheets without JavaScript.

Understanding the :target Selector

Think of :target as “which section does the URL point at right now?”:

• page.html#about → #about element matches :target.
• page.html (no hash) → nothing matches :target.
• $(":target") → any element type with matching id.
• $("section:target") → only if the targeted node is a section.

📝 Syntax

Official jQuery API form (since 1.9):

jQuery( ":target" )

// any targeted element:
$( ":target" )

// scoped (official docs example for #foo on a p):
$( "p:target" )
$( "section:target" )

// read current hash:
window.location.hash   // "#foo"

// native CSS (standard):
document.querySelector( ":target" )

// CSS stylesheet (no jQuery):
// :target { background: #fef3c7; }

Parameters

• No arguments — matches the element whose id equals the URI fragment (without #).

Return value

• A jQuery object containing zero or one element — at most one id matches the single hash.

Official jQuery API example

// URI: https://example.com/#foo
$( "p:target" );   // selects <p id="foo">…</p>

// Highlight whichever section the hash references:
$( ":target" ).addClass( "is-highlighted" );

Examples Gallery

Examples follow the official jQuery :target definition for URI fragments. Try the labs with different hash values in the URL bar to see selection change live.

$( ":target" ).addClass( "is-highlighted" );

// With URI …/page.html#about → #about gets the class
// With no hash → matched set is empty

URL …#about → #about section highlighted
URL with no hash → no highlight applied

// URI: https://example.com/#foo
var el = $( "p:target" );

if ( el.length ) {
  $( "#log" ).text( "Targeted paragraph: " + el.text() );
}

URL …#foo → p#foo matched, log shows its text
URL …#foo on a div#foo → p:target empty (wrong tag)

var hash = window.location.hash;          // "#pricing"
var target = $( ":target" );

console.log( "Hash:", hash );
console.log( "Target id:", target.attr( "id" ) );

Hash: #pricing
Target id: pricing (without the # in .attr("id"))

section:target {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding-left: 12px;
}

/* jQuery equivalent on load: */
/* $( "section:target" ).addClass( "highlight" ); */

Click #faq link → FAQ section styled via CSS :target
No JavaScript required for basic highlight

function highlightTarget() {
  $( "section" ).removeClass( "active" );
  $( ":target" ).addClass( "active" );
}

highlightTarget();
$( window ).on( "hashchange", highlightTarget );

Click nav links → hash changes → new :target gets .active
Previous section loses highlight

🚀 Common Use Cases

• Documentation TOCs — highlight the section linked from the table of contents.
• FAQ accordions — open or emphasize the panel matching #question-3.
• Tab-less nav — style section:target as the active panel.
• Shareable links — send URLs with hashes so recipients land on the right paragraph.
• CSS-only UX — use :target { } for lightbox or reveal patterns.
• Analytics — log $( ":target" ).attr( "id" ) on hashchange.

📝 Notes

• Available since jQuery 1.9 — matches URI fragment target element.
• Standard CSS — works in querySelector(":target") and stylesheets.
• At most one element matches — one hash fragment at a time.
• No hash in URL → empty jQuery collection.
• Fragment ids must be unique — duplicate ids produce undefined behavior.
• Do not confuse with jQuery .target event property or :root document root.

💡 Best Practices