Skip to main content
whitep4nth3r logo

The universal CSS * selector isn't actually universal

For my ENTIRE 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.

Like weird newsletters?

Join 338+ subscribers in the Weird Wide Web Hole to find no answers to questions you didn't know you had.

Subscribe

Salma is looking at you, with a rather large smile. She's pointing across herself up to her left, with a very tatooed arm. She's wearing a black shirt and black rimmed glasses.

Salma Alam-Naylor

I'm a live streamer, software engineer, and developer educator. I help developers build cool stuff with blog posts, 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 from screen readers, so that your weird 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 this question before the information stayed in my brain. Sound familiar? Then this post is for you.

CSS 3 min read →