CSS pseudo-selector for h1-h6?

[pmaxhogan]

I frequently find myself writing CSS like this:

h1, h2, h3, h4, h5, h6{
     ...
}

It annoys me that I have to type h1, h2, h3, h4, h5, h6 so much. But it gets worse:

article h1, article h2, article h3, article h4, article h5, article h6{
     ...
}

or even

article h1.bold:hover, article h2.bold:hover, article h3.bold:hover, article h4.bold:hover, article h5.bold:hover, article h6.bold:hover{
     ...
}

Wouldn't it be nice to just type

:heading{
     ...
}

or

article :heading{
     ...
}

or

article :heading.bold:hover{
     ...
}

:heading just matches h1-h6. It would be easy to implement for browser vendors and easy to polyfill. But extremely helpful.

Having a heading selector like :heading would be AWESOME!

[notoriousb1t]

Peanut gallery here. :heading seems ultra specific. Maybe we would be better served by a tag selector? Something like

/h[0-6]/ {
   font-weight: bold;
}

With custom tags in html, there is a good use case for prefixed elements

<react-list-view></react-list-view>

would be selected by

/react-*/ {
   font-weight: bold;
}

[SelenIT]

There is the CSS Custom Selectors proposal (it even has its PostCSS plugin) which would solve this exact issue and much more. But doesn't :matches(h1, h2, h3) from Selectors level 4 already solve the main problem here (code duplication)?

[pmaxhogan]

See #1010

[annevk]

whatwg/html#3499 contains a :heading/:heading() pseudo-class selector proposal. @fantasai wrote that Selectors should maybe define that given that other host languages might have utility for it too. If it's successful for HTML that seems reasonable to me.

[tabatkins]

But doesn't :matches(h1, h2, h3) from Selectors level 4 already solve the main problem here (code duplication)?

No, because HTML has ways of assigning heading levels that go beyond tagnames - h1 nested inside of sectioning elements automatically becomes a second/third/etc level heading, as appropriate. (Plus, :heading really is pretty dramatically shorter to type than :matches(h1, h2, h3, h4, h5, h6), and is a pretty common thing to want to style.)

[Crissov]

Would :heading match any of <caption>, <figcaption>, <label>, <legend> as well?

PS: … or <thead>, <th>, <hgroup>, <header> …

[tabatkins]

Nah, none of those are "headings" in HTML's semantics. They're labels for some content, which serve a similar purpose, but aren't the same thing.

[inoas]

Is /h[0-6]/ actually a valid selector (not to my knowledge)
But if it is not, why not make that a valid selector?

[tomhodgins]

@inoas are there any other HTML tag names, other than H1–6 where a regex-like selector like that would make sense?

If you're wanting to select tags by partial tag name like that, though CSS selectors won't currently do it, you can do this with XPath using a selector like: //*[substring-after(name(), "h") > 0]

Demo: https://codepen.io/tomhodgins/pen/ybgMpN

[tabatkins]

It's not a valid selector, but it's also a remarkably complex feature for something as limited as "match this family of tagnames". LIke @tomhodgins says, there's very little call for substring-matching on tagname; insofar as we do want such a thing, prefix/suffix-matching like XPath provides probably provides 90%+ of the desired functionality.

But such a thing wouldn't even work here, because part of the point of a heading-level selector is that it works off of the HTML outline algorithm, not the tagname.