- The universal selector is one of the oddest and least understood selectors in all of CSS. Represented simply by an asterisk, this selector matches every element type in your document. Now, this can be extremely useful for doing things like CSS resets or setting defaults for specific properties like box sizing, but the universal selector can also have some downright odd effects. So before using it, it's really helpful to understand its behavior. So, getting a little deeper into the syntax, I'm gonna scroll down here.
I have the universal.htm file opened up from the 01_06 directory. Right now, I have opened up in the browser, obviously. And if I go down to the syntax section, you can see all you need to write this selector is the asterisk. That's it. When you do that, the browser is gonna return every single element on the page, which can be great and can be really odd. We can also combine it in a descendant selector. You can see the example below that is div space asterisk space em.
That's gonna target any em inside any other element which is also inside of div in some way. So, that seems really kind of weird, and it is, but it's also kind of useful and I'm gonna show you how that's useful here in just a moment. So I'm gonna go into my code editor here. Before I get into writing the selector itself, I wanna go down into our Example section here at the bottom of the page. I just wanna go over the structure here. So we have an article with a class example.
We have a heading, h3, and then we have a section. Inside that section, I have an h4 and a paragraph, then I have a nested article with a paragraph. Below that, I have another nested aside with a paragraph and that one also has a link applied to it. So going back up to the top of our page into our styles, I'm gonna go ahead and write that universal selector. Again, very simple, very easy to write, just an asterisk. Then, I'm just gonna set something very simple here.
I'm gonna set color to red. This is gonna illustrate one of the very interesting things about the universal selector and what it does for us. So if I go back out to my browser and refresh my page, a lot of things turn red, but not everything. So what's going on here? Well, anything that didn't, in my existing stylesheet, already have a color defined, is now red. I mean everything. Anything that I had defined a color on, is actually overriding the universal selector and that's one of the very interesting things about the universal selector is that it has in itself no specificity.
So every rule will override it if there's a conflict there, which is kind of nice. That's useful because you can write something really globally knowing that anything that you write locally is going to override it, which is really nice. However, we don't always take into account the universal selector's effect on inheritance. Let me show you what I mean by that. I'm gonna go back into my code editor and I'm gonna change gears for just a moment and open up styles.css. This is the sort of the really minimal stylesheet that I already have driving my example page, and I'm gonna scroll down and find my link selector which is this little guy right here.
What I'm gonna do is I'm just gonna turn it off for a moment by writing a comment. So I'm gonna do it by just doing a forward slash star and at the end of the rule, star forward slash, to turn that off. Essentially, I just sort of flipped the switch on it and turned it off for a just a moment. I'm gonna save that. I'm gonna go back into my page and I'm gonna scroll down because it's this link that I'm really interested in. I'm gonna refresh that. Huh, now that is odd because the link is red. Now, most of you guys probably know this, but browsers have default styles for things like links and if you don't style a link, typically, it's underlined in blue.
In this case, it's underlined in red and the reason for that is, the universal selector will go ahead and override everything in the default stylesheet in terms of inheritance. You would think that that link would still be blue, but it's not, and that's one of the effects that universal selector has that's sort of unintended. People don't really expect it. So, a lot of times, if they sort of allow the browser default styling to do a lot of the work for them, if they're using universal selector, it'll override a lot of that, sometimes without them expecting that to happen.
I'm gonna go back in, turn that off, there we go, and then save that. Now, let's talk about ways that we can make the universal selector really do some cool work for us. Going back down into that example again, take a look at the structure of this. We have this section, which has h4 and a paragraph inside of it, and then it has an article and an aside below it. Both the article and the aside also have a paragraph in it. Now, knowing what we know already, think about writing a selector that's only gonna affect the nested paragraphs, meaning the one inside the article and the one inside the aside.
Now, we just did an exercise on descendant selectors so that's the first thing that comes to mind, maybe, but if I go back up and change our universal selector to section space p, meaning when paragraphs are nested inside of the section. If I save that, we go back out to my example file, now the only thing that's red are all my paragraphs but they're all my paragraphs, but I only wanted the ones that were nested inside the article and inside the aside to be red. I didn't want this paragraph to be red.
That's one of the things where the descendant selector can really come in handy. A lot of people would say, "Oh, we'll just go ahead and apply a class attribute," and you could certainly do that. But if you didn't want to add a class to both of the nested paragraphs, an easy way to do that is to write a universal selector that does this. So essentially, this selector is saying, "Hey, when you find a paragraph, which is nested inside of "any other element, "which those elements are in turn "nested inside of a section, "go ahead and apply the styling." So now, if I save this, and go back out to my exercise and refresh it, you could see that the initial or direct child paragraph isn't styled, but the two nested paragraphs are because of the way the descendant selector is utilizing the universal selector.
As you can see, the universal selector can be extremely powerful and pretty flexible. However, I do wanna point out, it's really important not to overuse the universal selector. It can really be inefficient in terms of browser performance especially when you combine it with other selectors like we've done here. Most of the time, when I see it used or if I'm ever gonna use it myself, it's really to do a quick browser reset like setting all of your margins to zero or something like that or to set a default property like box sizing for all of your elements site-wide.
It can be an incredibly effective tool for writing styles, as long as you're aware of exactly how it works and again, you don't overuse it.
- Targeting classes and IDs
- Working with group selectors
- Targeting element attributes
- String matching
- Targeting links with pseudo-class selectors
- Targeting child elements and empty elements
- Targeting parent, child, and sibling elements
- Matching patterns
- Writing efficient selectors