Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Curtis Fletcher
Curtis Fletcher
1,736 Points

Universal selector not working

Hi. For some reason when I use the universal selector in css it doesnt work.

I set the text color to red and then try to use a universal selector to change it to blue but it doesnt work.

Heres the code:

https://jsfiddle.net/3acaLfnk/

5 Answers

Max Carter
Max Carter
168 Points

I'm pretty sure the p selector is over ridding the universal selector. Because the p selector is more specific it takes precedence over non-specific selectors such as *. If you removed the p selector the * would work.

Daniel Breen
Daniel Breen
14,943 Points

Hi Curtis,

It comes down to specificity. The universal selector is not as specific as the p element selector, so the element selector is given priority.

Curtis Fletcher
Curtis Fletcher
1,736 Points

I thought that the bottom-most line always over-rode the higher ones.

Isnt that basically what the "cascading" means in CSS?

andren
andren
28,558 Points

No, the order the rules are listed in only matter if they are of the exact same Specificity. Once you have rules with different Specificity the order stops mattering for the most part.

I would recommend you look up some info on Specificity, and also take a look at the Specificity Calculator which is a useful site for visualizing the different Specificity scores that different selectors have.

* has a specificity of 0 and p has a specificity of 1. Which is why your first rule overrides the second.

Curtis Fletcher
Curtis Fletcher
1,736 Points

I thought its relevant to mention something that I read (from andrens link about "specificity"):

You can force a rule to take priority over something thats more specific than it by using "!important".

Like: https://jsfiddle.net/x3nje583/

andren
andren
28,558 Points

While it's true that you can override specificity priority by using !important, it is something you should use very sparingly. Specificity exists for a reason, and overriding it all the time will eventually cause issues where styles mysteriously are not applied in a predictable fashion because some rule that shouldn't take priority in a certain scenario ends up doing so because you gave it the !important tag. And issue like that can be hard to diagnose if you have a large project with tons of CSS rules.

Don't get me wrong there are certain scenarios where using it is fine, it wouldn't exist if there wasn't. But if you use it every time you end up not having a rule apply like you want it to then you will run into "buggy" behavior pretty quickly. It is usually better to figure out why your rule is being overridden and then making it more specific to compensate. Which is not actually that difficult to do if you use the calculator I linked to above.