Re: [csswg-drafts] [selectors-4] Allow * before a type selector (#8253)

I would add that for the common CSS user, `*type` would be very inline with how the universal selector already works, essentially being an optional prefix to any selector, s demonstrated here:

<table>
  <thead>
    <tr>
      <th>w/ universal selector</th>
      <th>w/o universal selector</th>
      <th>identical targeting</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>*.class</code></td>
      <td><code>.class</code></td>
      <td>✅</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td><code>*#id</code></td>
      <td><code>#id</code></td>
      <td>✅</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td><code>*[attribute]</code></td>
      <td><code>[attribute]</code></td>
      <td>✅</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td><code>*:pseudo-class</code></td>
      <td><code>:pseudo-class</code></td>
      <td>✅</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td><code>*::pseudo-element</code></td>
      <td><code>::pseudo-element</code></td>
      <td>✅</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td><code>*type</code></td>
      <td><code>type</code></td>
      <td>❌</td>
    </tr>
  </tbody>
</table>

While namespaces could be used here (totally new to me), that option feels like a weaker workaround AFAICT, as it…
* requires setting up a namespace first,  meaning the solution wouldn’t be universally compatible and would require an additional step
* would seem more unfamiliar to most developers and it isn’t as intuitive as prepending a selector with `*`

Rather than a mandatory prefix, this is just another way of writing type selector, similar to how you can pretend virtually any other plain selector (sans `*`) with `*`.

Even if this wasn’t going to be the _official_ recommendation for nesting types — though I think that would be sensible — I think this syntax just makes the universal selector work more consistently in general.

---

I put together a pen for this which can be used for demonstrating this proposal as well as to test this if is ever implemented:
https://codepen.io/brandonmcconnell/pen/eYjYVrE

<div align="center">
  <a href="https://codepen.io/brandonmcconnell/pen/eYjYVrE" target="_blank">
    <picture>
      <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/5913254/216177278-10842410-fc93-4ddd-bf4c-9b3504b522b3.png">
      <img alt="Ambiguous Universal Selector CSS" src="https://user-images.githubusercontent.com/5913254/216177255-d313edf9-5e4c-44b5-ab6d-3cb49a472eb4.png" width="400">
    </picture>
  </a>
</div>

-- 
GitHub Notification of comment by brandonmcconnell
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8253#issuecomment-1413915788 using your GitHub account


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

Received on Thursday, 2 February 2023 15:21:37 UTC