- From: Brandon McConnell via GitHub <sysbot+gh@w3.org>
- Date: Wed, 01 Feb 2023 22:09:47 +0000
- To: public-css-archive@w3.org
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