Skip to main content
whitep4nth3r logo

3 May 2023

1 min read

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?

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.

Salma whilst live streaming, smiling, with a finger on her lips, kind of thinking, wearing a leopard print shirt.

Salma Alam-Naylor

I'm a live streamer, software engineer, and developer educator. I help developers build cool stuff with blog posts, tutorial videos, live coding and open source projects.

Related posts

23 Apr 2023

Hide text in CSS pseudo elements from screen readers with this one weird trick

Learn how to hide decorative text generated by CSS pseudo elements from screen readers, so that your weird and wonderful designs don't interrupt the flow of the text.

CSS 2 min read →

31 Aug 2022

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

I spent years Googling “what is the difference between : and :: in CSS” before the information stayed in my brain. Sound familiar? Then this post is for you.

CSS 3 min read →