The asterisk * is known as the universal selector in CSS. It matches all elements of any type.
* {
color: red;
}
This example would chang...
For further actions, you may consider blocking this person and/or reporting abuse
The main reason why I use the
*selector is for quick-and-dirty debugging of a page to figure out why some nesting isn't behaving the way I thought it would (using e.g.* { background-color: rgba(255,0,0,0.1); }or* { border: solid red 1px; }or the like), although now that all of the browsers have a good element inspector that's a lot less useful.What about shadow-dom?
When you have a few elements in your document the performance consideration of * is mostly irrelevant. In your shadow Dom you're in a document fragment and the same applies. Now, if you have lots of elements in your shadow Dom, you likely should reconsider how you split your components.
Yes, but I was more commenting on how '*' doesn't apply to everything since it doesn't pierce shadow-roots. ie 'Universal' itself, is sort of a misconception. It is sort of obvious, but it's worth pointing out, maybe.
Ugh, got it :-)
But that actually depends: many CSS properties are inherited from the host node into the shadow DOM, if not overwritten in the shadow DOMs style. So in many cases '*' will apply to everything, though it will not select everything. E.g. querySelectorAll will not return stuff from document fragments, but a CSS rule with that selector may still apply to stuff in the fragments through inheriting.
No idea what that does to performance, though :D
Oh, one more comment on this:
Currently web components are predominantly used as a way of organizing stuff in web applications. In these cases the question is of little relevance since such applications usually have little global style and a lot compartementalized styles.
However, in the future web components are envisioned to also or primarily serve as independent re-usable widgets. Now if you have dozens of independent web components on a page and then mess around with '*' on the top level, you are probably asking for all kinds of trouble plus a potential performance impact.
Well, that is interesting. I just tried this on one of my apps by setting font-style to italics, and it affected some stuff inside my elements. I wonder how I missed that...I wonder if it was like that in v0 shadow-dom.
Yeah, afaik css custom properties have been the recommended way of changing style inside shadow-dom - I wonder if that performs better...and there's upcoming features more applicable to theming, right? (I've been out of the loop for a little while).
Yes, shadow parts. w3.org/TR/css-shadow-parts-1/
But that looks like it will take some time. There was another proposal for theming, @apply I think, but it turned out, that that doesn't really fly. Hence the delay. Shadow parts seems pretty clever and comprehensive, though. Let's hope :)
Thank you for writing about this! I learned a lot from it. I still wouldn't use the
*selector (for the reasons you stated in the article) unless I intend to use it with thebox-sizingproperty. For optimization, I'd much rather restructure my DOM than to use a "universal solution".The universal selector can be very useful if you are creating a 3rd party widget for any other website to use and you don't want their css to affect you. Then you can do something like:
Which can act like css reset just for the elements contained within the widget you are creating.
Nice, that's a really good workaround for specificity issues!
I avoid the global selector. In the past I made something like
Now I use
bodyand have the wished effect.Nice research! Thank you
Really nice post Claire, informative, short and neat!
id > *. A typo here. And then I believe this is superfluous. You only need #id * the cascade does the work. Last, * > #id same thing, you only need #.