7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 5Length: 27 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 The !important Rule and Universal Selector

In this final lesson I want to quickly go over the universal selector and the !important tag, and talk about their role when it comes to CSS specificity.

Related Links

2.4 The !important Rule and Universal Selector

Welcome back to the course. In this final lesson, I want to quickly cover the important rule, the universal selector and their role when it comes to calculating specificity. So let's begin. Now, to demonstrate I have a div with a class of container and within it a paragraph. Now, let's talk about the universal selector first. The universal selector goes something like this. So if I say asterics color green, everything that can receive a color will get this green value. But the thing is, if I go ahead and say container paragraph, for example, color blue, now that's blue. And if I do container paragraph color red, now that's red. So a couple of things we can deduce from here. Number one, the universal selector has no effect on specificity. Also the combinators, which is this, or this, or this, right? Among others, these also do not have an effect on specificity. The negation pseudo class, which is this one, also has no effect on specificity. So that's the gist of it for the universal selector. Now what about the important rule? For that I defined a paragraph with an ID, a class, and an inline style. And watch what happens. If I say, or if I target the element with an ID selector and I say color blue, for example. This doesn't do anything because I have an inline style which, as we know, overwrites anything else, any other style in an external style sheet. However, if I were to say my paragraph, Color red. Again, nothing happens. But if I add, Important, well, now that's red. This happens because when this important rule is used, this style declaration overwrites any other declarations. And it even overrides inline styles like you saw here. Now, technically, this important rule doesn't have anything to do with specificity, but it does like work or interact directly with it. Just remember that using this important rule is considered to be bad practice because it's just gonna make debugging a lot more difficult because it's breaking the natural cascading rules in your stylesheet. So if possible, always avoid this important rule. And if you're also wondering, if we have two declarations with the important rule, the styles that belong to the declaration with the highest specificity will be applied. So these two have both important apply to them. But from these two selectors, the one with the ID or the ID selector has the higher specificity. So that one gets applied, the text now becomes blue. If I remove this, it's gonna be red because this is the only declaration that has an important rule, all right? And that's pretty much it for this course. I hope it gave you a better idea of how styles are applied in a browser, and how CSS specificity is calculated. I think this will greatly benefit you in the long run because you'll be writing better CSS. And if you run into any problems regarding conflicting styles and that sort of thing, you'll be able to fix them much, much faster. Plus, it's always a good idea or a good thing to know what's happening behind the scenes when dealing with browsers and CSS and code, and stuff like that. So, yeah, hopefully, it was a beneficial course. With that said, thank you very much for watching. I'm Mike and until next time, take care.

Back to the top