What Does the jQuery :header Selector Match?

The jQuery :header selector is a built-in pseudo-selector designed to target heading elements across a webpage. While web developers frequently wonder whether this selector encompasses newer semantic elements like <header> or accessible ARIA roles, its technical implementation is strictly bound to element tag names. This article examines exactly what the :header selector targets, what it includes beyond the standard <h1> through <h6> tags, and the common misconceptions surrounding its usage.

The Underlying Implementation

In the jQuery source code, the :header pseudo-class is defined using a basic regular expression that evaluates the nodeName of DOM elements:

jQuery.expr.pseudos.header = function( elem ) {
    return /^h\d$/i.test( elem.nodeName );
};

Because of this specific regular expression (/^h\d$/i), jQuery checks whether an element's tag name begins with the letter "h" (case-insensitive) followed immediately by any single numerical digit (\d).

Elements Selected Beyond <h1> Through <h6>

Under official HTML specifications, heading tags only range from <h1> to <h6>. However, browsers allow custom or non-standard HTML tags to exist in the DOM tree. Because jQuery’s regular expression matches any single digit from 0 to 9, the :header selector will match:

  • <h0>
  • <h7>
  • <h8>
  • <h9>

If any custom or legacy elements using these non-standard tag names are present in the document, jQuery will treat them as headers alongside <h1> through <h6>.

What the :header Selector Does Not Include

Despite common assumptions, the :header selector does not match the following elements:

  1. The HTML5 <header> Tag: The word "header" does not match the single-digit pattern /^h\d$/i. To target HTML5 container headers, you must use the standard element selector $('header').
  2. ARIA Headings: Elements containing the attribute role="heading" (such as <div role="heading" aria-level="2">) are ignored. The selector purely inspects nodeName, not element attributes or accessibility tree roles.
  3. Headings Above Single Digits: Tags like <h10> will not match because the regular expression specifies exactly one digit after the "h".

Modern Alternative

Since :header is a jQuery-specific extension and not part of the standard CSS specification, queries using it cannot take advantage of the native browser querySelectorAll performance optimizations. In modern JavaScript or standard CSS selection, achieving the standard heading selection is handled explicitly:

// Native DOM equivalent
document.querySelectorAll('h1, h2, h3, h4, h5, h6');

// Standard jQuery equivalent
$('h1, h2, h3, h4, h5, h6');