The universal CSS * selector isn't actually universal

Table of contents

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.

First off, if you're unfamiliar with pseudo elements, read this post: What's the difference between : and :: in CSS?

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?

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.

On CodePen: Play with the universal selector (*) in CSS