What Is :header?

:header (since jQuery 1.2) selects all heading elements — h1 through h6 — in one expression. It matches real heading tags only, not “title-looking” div or p elements.

$(":header")                         // all h1–h6 on the page
$("article :header")                 // headings inside article only
$("#main *").filter(":header")       // faster scoped pattern

// Same matches as:
$("h1, h2, h3, h4, h5, h6")

How to Use :header

Pick headings with $(":header"), then style, count, or build a TOC from the set.

1. Call $(":header") (or scope it: $("article :header")).
2. jQuery returns every h1–h6 in that context.
3. Chain methods — .css(), .each(), .text(), and so on.
4. On large pages, prefer $("#scope *").filter(":header").
5. Remember: classed “titles” that are not heading tags are ignored.

Pseudocode

call $(":header")   // or $("context :header")

for each element in the document (or context):
    if tagName is h1, h2, h3, h4, h5, or h6:
        include it in the result set

return the jQuery set of those headings

Cheat Sheet

Keep these facts handy when selecting headings.

Live Preview

Click Run to list every :header match in the sample markup below.

Ready — click Run to list headings.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

$(":header").each(function () {
  $(this).append(" [header]");
});

Header 1 [header]
Contents 1
Header 2 [header]
Contents 2

$("#content *").filter(":header").each(function () {
  $(this).append(" [in content]");
});

#content headings get " [in content]"
#sidebar headings stay unchanged

$("article :header").each(function () {
  $(this).append(" [article]");
});

Article headings → tagged with [article]
Aside headings → unchanged

var a = $(":header").length;
var b = $("h1, h2, h3, h4, h5, h6").length;
$("#log").text(":header → " + a + " | tag list → " + b);

:header → 3 | tag list → 3

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);

TOC appears at top:
• Guide
• Chapter One
• Chapter Two
Each links to its heading id

Performance Notes

Official guidance: select with pure CSS first, then .filter(":header"), so you keep the convenience without a full-page extension scan.

Key Takeaways