[css-selectors] Support universal selector usage with tagname *tagname #8392
Description
Currently, all/most selectors support use after the universal selector.
For example…
| w/ universal selector | w/o universal selector | identical targeting |
|---|---|---|
*.class |
.class |
✅ |
*#id |
#id |
✅ |
*[attribute] |
[attribute] |
✅ |
*:pseudo |
:pseudo |
✅ |
*::pseudo |
::pseudo |
✅ |
*elem |
elem |
❌ |
Some advantages to allowing the universal selector to prepend tagname selectors are:
-
better consistency in how all selectors behave with the universal selector
-
easier nesting syntax agreed upon nesting syntax
Up until now, the generally accepted and voted upon nesting syntax requires wrapping a selector with something like
:is()or:where()when it begins with an alpha character since that could easily be confused with a CSS property name. That can look something like this:a:hover { color: hotpink; :is(aside) & { color: red; } }
With this change to how the universal selector works next to tagnames, this same block could now be rewritten much more concisely using
*like this:a:hover { color: hotpink; *aside & { color: red; } }
I put together a pen for this which can be used for demonstrating this proposal and also to test if/when this is implemented:
https://codepen.io/brandonmcconnell/pen/eYjYVrE
