The universal CSS * selector isn't actually universal

I learned this week that for my ENTIRE professional career I have been living with an enormous misconception: the universal CSS selector doesn't actually select EVERYTHING.

Whenever I start a new web project, I begin by writing a very small "CSS reset", which uses the universal selector (*) to apply desired styles to every single element. My CSS reset usually looks something like this:

* {
  box-sizing: border-box;
  margin: 0;
}

This little block of code sets all elements to use a box-sizing value I like best (see my talk on the CSS box model for more information), and removes all default margins from everything — just because I like it that way. I haven't encountered any issues with this method, and you probably haven't and you probably won't — but here's a little nugget of knowledge that might save you hours of debugging in the future.

The CSS universal selector doesn't apply to pseudo elements

First off, if you're unfamiliar with pseudo elements, read this post:

What's the difference between : and :: in CSS?

Salma Alam-Naylor ・ Sep 1 '22

#css #webdev #beginners

Any properties declared using the CSS * selector don't apply to pseudo elements. In the case of my CSS reset, whilst you don't need to remove margins from pseudo elements (because there is no margin set by default), if you wanted to do something bolder using the CSS universal selector, such as adding a red border to all elements and pseudo elements, you'll have to set the value explicitly on the element itself.

I'm not sure why you'd want to do this, but you could, right?

But a pseudo element isn't a real element, obvs

Of course. You could also argue that a pseudo element isn't an actual element to be selected using the * selector, since it's not. It's a pseudo element; it's fake! This is obviously technically correct. But I felt like writing about it anyway. Here's a demo on CodePen for you to mess with.