My Misconceptions about the Universal Selector in CSS

Claire Parker-Jones on April 21, 2019

The asterisk * is known as the universal selector in CSS. It matches all elements of any type. * { color: red; } This example would chang... [Read Full]
markdown guide

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.
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 :)

Right, I use @apply quite a lot since it's part of Polymer - v1 at least. It works as far as it goes, but I'm not sure it completely satisfies the theming use-case - well, not on its own anyway. Vaadin have a theming system which sounded quite clean - they did a presentation on that prior to the last Polymer summit - and I think there was a presentation on an alternative in the summit itself, iirc (perhaps it was the shadow parts thing, I forget).
We'll see :)

IIRC correctly Vaadin basically went ahead and support shadow parts for their components, but I'm not sure, quite some time, since I looked at it. The problem with apply is, that it gives the consumer no way to discern styles for stuff like :hover or parent classes. The comment developer has to invest a lot of thought and development to allow for such use cases.


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 the box-sizing property. 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:

#my-widget > *
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    .. etc ..

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!


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.


I avoid the global selector. In the past I made something like

* {

Now I use body and have the wished effect.


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 #.

code of conduct - report abuse