Skip to content

Add :heading and :heading() pseudo-classes #11413

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

zcorpan
Copy link
Member

@zcorpan zcorpan commented Jun 27, 2025

Fixes #11412.

(See WHATWG Working Mode: Changes for more details.)


/rendering.html ( diff )
/semantics-other.html ( diff )

Copy link
Member

@annevk annevk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

Should we revisit the UA style sheet at this point as well? Coupling them makes some sense to me.

@annevk annevk added addition/proposal New features or enhancements topic: selectors labels Jun 27, 2025
@annevk
Copy link
Member

annevk commented Jun 27, 2025

I guess leaving out the change to the individual hN selectors makes sense. We can make that change to the UA style sheet as part of the new attributes, as until then it wouldn't really be an improvement.

I'm double checking whether WebKit is interested, but I suspect so.

<code>h6</code> elements.</p></dd>

<dt><dfn selector noexport data-x="selector-heading-functional">:heading(<var>An+B</var>)</dfn></dt>
<dd><p>The <code data-x="selector-heading-functional">:heading(<var>An+B</var>)</code>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given :heading() can take a comma separated list of An+B values do we need more here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added # to indicate this.

<code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>, and
<code>h6</code> elements.</p></dd>

<dt><dfn selector noexport data-x="selector-heading-functional">:heading(<var>An+B</var>#)</dfn></dt>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider linking these to https://www.w3.org/TR/css-syntax-3/#anb-microsyntax and maybe https://www.w3.org/TR/css-values-3/#mult-comma as these are both parts of CSS syntax that aren't otherwise mentioned in the HTML spec as far as I can tell.

@annevk
Copy link
Member

annevk commented Jun 27, 2025

@fantasai pointed out to me that in w3c/csswg-drafts#10296 (comment) there was discussion about a different specificity for these pseudo-classes, but this does not appear to be reflected in the changes to the Selectors specification, despite claims back in April that it would be. Can someone clarify this for me?

@keithamus
Copy link
Contributor

keithamus commented Jun 27, 2025

[...] specificity for these pseudo-classes [...]

The spec states: https://drafts.csswg.org/selectors-5/#headings

The specificity of :heading() is that of a class.

This was updated in w3c/csswg-drafts#12404 which while not updated in April as claimed, was updated today!

AIUI this is per the resolution in w3c/csswg-drafts#10296 (comment).

RESOLVED: :heading() has the expected class-level specificity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
addition/proposal New features or enhancements topic: selectors
4 participants