jQuery :header Selector

What You’ll Learn

The :header selector matches every heading element — h1, h2, h3, h4, h5, and h6 — in one jQuery expression. jQuery extension since 1.2; official docs recommend scoping with CSS first, then .filter(":header") for performance.

Introduction

Pages often mix six heading levels. When you want to style every heading at once — add a background, unify color, build a table of contents, or attach click handlers — listing h1, h2, h3, h4, h5, h6 every time is repetitive. jQuery’s :header pseudo-class selects all of them in a single expression.

jQuery has supported :header since version 1.2. Official documentation describes it as selecting all elements that are headers, like h1, h2, h3, and so on. Because it is a jQuery extension, prefer $("h1, h2, h3, h4, h5, h6") or $("article *").filter(":header") when you need native selector speed on large documents.

Understanding the :header Selector

Think of :header as a shortcut for “any heading tag”:

• <h1>Title</h1> + :header → matches.
• <h3>Section</h3> + :header → matches.
• <p>Not a heading</p> + :header → no match.
• <div class="title">…</div> styled like a title → no match (not an h1–h6 tag).

📝 Syntax

Official jQuery API form (since 1.2):

jQuery( ":header" )

// typical usage:
$( ":header" )
$( "article :header" )
$( "#sidebar :header" )

// performance pattern — CSS scope, then filter:
$( "article *" ).filter( ":header" )

// CSS-equivalent (native querySelectorAll):
$( "h1, h2, h3, h4, h5, h6" )

Parameters

• None — :header takes no arguments. It always means h1, h2, h3, h4, h5, or h6.

Return value

• A jQuery object containing every matched heading element in document order.
• Empty collection when no headings exist in the search scope.

Official jQuery API example

$( ":header" ).css({
  background: "#ccc",
  color: "blue"
});

Examples Gallery

Example 1 follows the official jQuery :header demo. Examples 2–5 cover the .filter(":header") pattern, scoped headings, CSS-equivalent lists, and a table-of-contents helper.

$( ":header" ).css({
  background: "#ccc",
  color: "blue"
});

Header 1, Header 2 → gray background, blue text
"Contents 1", "Contents 2" paragraphs → unchanged

// instead of scanning the whole document:
// $( ":header" ).css({ … });

// recommended when you know the region:
$( "#content *" ).filter( ":header" ).css({
  background: "#ccc",
  color: "blue"
});

#content headings → styled
Headings in #sidebar → unchanged (outside scope)

$( "article :header" ).css( "borderLeft", "4px solid #2563eb" );

Article h2 and h3 → blue left border
Aside h4 "Related" → unchanged

var viaHeader = $( ":header" ).length;
var viaTags = $( "h1, h2, h3, h4, h5, h6" ).length;

console.log( ":header →", viaHeader );
console.log( "tag list →", viaTags );

:header → 3
tag list → 3 (same heading count)

var $list = $( "<ul id='toc'></ul>" );

$( ":header" ).each(function ( i ) {
  var id = "section-" + i;
  $( this ).attr( "id", id );
  $list.append(
    $( "<li><a></a></li>" )
      .find( "a" )
      .attr( "href", "#" + id )
      .text( $( this ).text() )
      .end()
  );
});

$( "body" ).prepend( $list );

UL#toc prepended with links to each heading
Clicking a link scrolls to the matching h1/h2

🚀 Common Use Cases

• Global styling — unify all headings with $(":header").css(...) as in the official demo.
• Documentation — build table-of-contents links from every heading.
• CMS themes — add anchor IDs to h1–h6 in article bodies only.
• Accessibility audits — count headings with $(":header").length.
• Print styles — add page-break rules to all heading levels at once.
• Performance — scope with CSS, then .filter(":header") on large pages.

📝 Notes

• Available since jQuery 1.2 — jQuery extension, not native CSS.
• Matches h1, h2, h3, h4, h5, and h6 only — not <header> landmark elements.
• CSS equivalent: h1, h2, h3, h4, h5, h6.
• Prefer $("region *").filter(":header") over bare $(":header") on large documents per official docs.
• Combine with descendant scope — article :header, #main :header.
• Not related to HTTP headers or jQuery .header() (no such method).

💡 Best Practices