Open pmaxhogan opened 7 years ago
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;
}
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)?
See #1010
https://github.com/whatwg/html/pull/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.
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.)
Would :heading
match any of <caption>
, <figcaption>
, <label>
, <legend>
as well?
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.
~Is /h[0-6]/
actually a valid selector (not to my knowledge)
But if it is not, why not make that a valid selector?~
@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]
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.
Hm. Then I guess a related :caption
selector would match the elements I mentioned and headings that are the top level in a <section>
.
Iʼm not sure what to do with <th>
though.
@emilio raised an interesting concern that I don't have a good solution for. If you have
:heading(1) { ... }
:heading(2) { ... }
:heading(3) { ... }
and then for some reason you end up with a level 4 heading on your page, the ideal "failure mode" is that it'll render the same as 3.
Maybe instead what you want is heading-level
as a variable that can be used by calc()
or some such.
Thoughts?
Unless there's a relative clear answer here I'm inclined to leave this feature out of https://github.com/whatwg/html/pull/3499 and save that for a future iteration.
cc @hober
@js-choi's idea in https://github.com/whatwg/html/issues/3500 might be another way out here, but that looks quite involved as well.
An alternative idea is saying that :heading(n)
matches if the heading level is less than or equal to n
.
An alternative idea is saying that :heading(n) matches if the heading level is less than or equal to n.
I wouldn't want that to be the default behavior, but if this selector is adopted, I think it does make sense to add a second syntax that supports inequalities. It could be harmonized with the syntax being discussed in #4140 for nth-child()
family of selectors:
heading(3)
for only level-3 headingsheading(n <= 3)
for level 1, 2, or 3heading(n > 3)
for level 4, 5, 6, (and beyond)(Edit: and now I see that this is the exact proposal from the HTML issue linked by Anne)
@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]
Don't work with Selenium :-(
%heading works…
I frequently find myself writing CSS like this:
It annoys me that I have to type
h1, h2, h3, h4, h5, h6
so much. But it gets worse:or even
Wouldn't it be nice to just type
or
or
: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!