CSS :heading Pseudo-Class

CSS :heading Pseudo-Class

The CSS :heading pseudo-class selects elements that are headings, regardless of their heading level. It provides a convenient way to apply consistent styles to HTML heading elements without listing each heading selector individually.

:heading Syntax

:heading {
  property: value;
}

The :heading pseudo-class does not accept arguments. It matches heading elements regardless of their heading level.

Example Syntax

:heading {
  color: #003366;
  font-family: Arial, sans-serif;
}

This rule applies the same text color and font family to all matching headings.

Combining with a Container

article :heading {
  color: #006699;
}

This selector targets headings that are descendants of an <article> element.

Combining with Classes

:heading.featured {
  border-bottom: 2px solid #0088cc;
}

This rule selects heading elements that also have the featured class.

How :heading Works

The :heading pseudo-class matches elements classified as headings by the document language.

In HTML, the standard heading elements are <h1> through <h6>.

Matching Heading Elements

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>

:heading {
  color: #0088cc;
}

All three heading elements match :heading in browsers that support the selector.

Not Based on Appearance

An element does not match :heading simply because it has large, bold text.

<p class="large-text">This looks like a heading.</p>

The paragraph does not match :heading because it is not an HTML heading element.

Heading Semantics

The selector is based on heading semantics rather than a particular font size or visual style.

Heading Elements

HTML provides six standard heading levels. These levels organize document content into a meaningful hierarchy.

HTML Heading Levels

Heading Groups

The <hgroup> element groups a heading with related content, such as a subtitle or tagline. The <hgroup> container itself is not a heading element matched by :heading.

<hgroup>
  <h1>CSS Reference</h1>
  <p>Selectors, properties, and examples</p>
</hgroup>

The <h1> matches :heading, but the surrounding <hgroup> and paragraph do not.

:heading vs. :heading()

The :heading and :heading() pseudo-classes are related, but they serve different purposes.

Comparison

All Headings

:heading {
  font-family: Arial, sans-serif;
}

This selector matches headings at every level.

Specific Heading Levels

:heading(2, 3) {
  color: #0088cc;
}

This selector matches second- and third-level headings in browsers supporting the functional form.

Choosing Between Them

Use :heading when the same style should apply to all headings. Use :heading() when styling depends on specific heading levels.

:heading vs. :is()

The :is() pseudo-class provides an established way to group heading selectors.

Using :heading

:heading {
  color: #003366;
}

Using :is()

:is(h1, h2, h3, h4, h5, h6) {
  color: #003366;
}

For standard HTML headings, these selectors produce the same matching result when :heading is supported.

Key Differences

For production websites requiring broad compatibility, :is(h1, h2, h3, h4, h5, h6) is a practical alternative.

:heading Specificity

As a pseudo-class, :heading contributes a specificity of 0-1-0.

Specificity Examples

Overriding Element Styles

h2 {
  color: #333;
}
:heading {
  color: #0088cc;
}

When both rules match the same element and other cascade factors are equal, the :heading rule wins because its specificity is higher.

Reducing Specificity

:where(:heading) {
  margin-bottom: 15px;
}

Wrapping :heading in :where() reduces the selector's specificity to zero.

Practical Uses

The :heading pseudo-class is useful for defining consistent heading styles across a website.

Consistent Heading Fonts

:heading {
  font-family: Arial, sans-serif;
  font-weight: bold;
}

All headings receive the same font family and weight.

Heading Spacing

:heading {
  margin-top: 20px;
  margin-bottom: 10px;
}

Shared spacing can help maintain consistent separation between headings and surrounding content.

Article Headings

article :heading {
  color: #003366;
}

This rule limits the heading color to headings inside articles.

Section Headings

section > :heading {
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px;
}

This selector styles headings that are direct children of section elements.

Limitations

The :heading pseudo-class is intended for semantic headings, but browser support is not yet consistent.

Limited Browser Support

Unsupported browsers ignore rules that use :heading. Provide compatible selectors when the styling is essential.

Not a Visual Heading Detector

The selector does not match ordinary paragraphs, spans, or divs merely because they are styled to resemble headings.

Does Not Change Heading Levels

The pseudo-class only selects elements for styling. It does not change the semantic heading level or document structure.

Compatibility Fallback

:is(h1, h2, h3, h4, h5, h6) {
  color: #003366;
}

This selector provides broadly supported styling for the six standard HTML heading elements.

Accessibility

Headings provide structure that helps users understand and navigate webpage content, including users of assistive technologies.

Use Semantic Heading Elements

Use the appropriate HTML heading level to represent the content hierarchy rather than choosing a level solely for its default font size.

Maintain a Logical Hierarchy

Organize headings in a meaningful sequence. Avoid skipping levels simply to obtain a preferred appearance.

Keep Headings Readable

Use sufficient contrast, readable font sizes, and appropriate spacing.

CSS Does Not Change Semantics

Styling an <h3> to look like an <h1> does not change its heading level for assistive technologies.

Best Practices

• Use :heading for shared styles across semantic heading elements.
• Use :heading() when specific heading levels need different styling.
• Provide a compatible fallback while browser support remains limited.
• Use heading levels according to document structure, not visual size.
• Keep heading typography and spacing consistent.
• Consider selector specificity when combining heading rules.
• Test heading styles in multiple browsers.

:heading Example

This example applies the same text color and font family to all six HTML heading levels. The fallback uses :is() so the example also works in browsers that do not support :heading.

HTML

<div class="heading-demo">
  <h1>Heading Level 1</h1>
  <h2>Heading Level 2</h2>
  <h3>Heading Level 3</h3>
  <h4>Heading Level 4</h4>
  <h5>Heading Level 5</h5>
  <h6>Heading Level 6</h6>
  <p>This paragraph is not a heading.</p>
</div>

CSS

.heading-demo :is(h1, h2, h3, h4, h5, h6) {
  color: #003366;
  font-family: Arial, sans-serif;
}
.heading-demo :heading {
  color: #0088cc;
}
.heading-demo h1 { font-size: 1.375rem; }
.heading-demo h2 { font-size: 1.25rem; }
.heading-demo h3 { font-size: 1.125rem; }
.heading-demo h4 { font-size: 1rem; }
.heading-demo h5 { font-size: 0.875rem; }
.heading-demo h6 { font-size: 0.75rem; }

In browsers supporting :heading, the headings appear blue. In other browsers, the fallback applies a darker blue. The paragraph is unaffected by either heading selector.

Browser Result

Play in Editor

Note: The fallback allows all headings to receive styling even when :heading is unsupported. The blue color difference indicates whether the browser applies the :heading rule.

Browser Support

Baseline: Limited availability. The :heading pseudo-class is not consistently supported across major browsers. Use standard heading selectors or :is() when broad compatibility is required.

For current compatibility information, visit Can I Use? and search for :heading.

Specifications

The :heading pseudo-class is defined in CSS Selectors Level 4 as part of the heading pseudo-classes. The specification also defines :heading() for selecting particular heading levels.

Selectors Level 4 - Heading Pseudo-Classes