[csswg-drafts] Support using universal selector with tagname (#8392)

brandonmcconnell has just created a new issue for https://github.com/w3c/csswg-drafts:

== Support using universal selector with tagname ==
Currently, all/most selectors support use after the universal selector.

For example…

- `*.class` and `.class` function identically ✅
- `*#id` and `#id` function identically ✅
- `*[attribute]` and `[attribute]` function identically ✅
- `*:pseudo` and `:pseudo` function identically ✅
- `*::pseudo` and `::pseudo` function identically ✅
- `*elem` and `elem` do **NOT** function identically ❌

Some advantages to allowing the universal selector to prepend tagname selectors in addition to the others it already does 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:
  
  ```css
  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:
  
  ```css
  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/01a5e665a090ddaa52d71eafc3465f0b?editors=1100

<div align="center"><a href="https://codepen.io/brandonmcconnell/pen/eYjYVrE/01a5e665a090ddaa52d71eafc3465f0b?editors=1100" target="_blank">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/5913254/216173668-20ada34c-df2b-4b1b-95da-0435c3ef65c1.png">
    <img alt="Ambiguous Universal Selector CSS" src="https://user-images.githubusercontent.com/5913254/216174269-e32d6674-892a-4398-887f-92b431d85a13.png" width="400">
  </picture>
</a></div>

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8392 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 1 February 2023 22:09:49 UTC