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
Katsumi Suno
4,194 PointsQuick Question about CSS Specificity
I still get confused about CSS declarations I only get to work with !important. But I don't want to get into that bad habbit and find out what the actual problem is. So here is an example:
<div class="index-card-thumb">
<p class="t-color-grey">Lorem Ipsum</p>
</div>
.index-card-thumb p
{ color: blue; }
.t-color-grey
{ color: lightgrey; }
Why can't I overwrite the blue color without adding !important to the t-color-grey class? The grey declaration comes after the blue. And it even has its own class. I thought if you select something with a class, thats pretty specific. It seems saying: "Look for the element with the class X and give the p-element withing this element a blue text color" is more specific than: "give the element with class Y a grey text color".
For those asking, why not declaring the color directly in the first place: sure, this was just a situation that occured building my page. The first rule in my example actually has more declarations for the said p-element and I only want to "outsource" the color property in a class for reuse on other elements.
1 Answer
andren
28,558 PointsThe order of the rules does not really matter once specificity differences comes into play, the order only matters if the rules has the exact same specificity. The reason why the first rule is considered more specific than the second one is that it uses a class selector and a tag selector, those two selectors both add points of specificity to the rule.
The second rule only has one selector. And while it's true that classes has more weight than plain tag selectors your first rule has a class selector and a tag selector. The fact that the class is not the one belonging directly to the element in question is irrelevant to it's specificity.
CSS basically works on a point system when it comes to specificity, id selectors are worth more than class selectors and they are worth more than tag selectors. If you use multiple selectors like you do in your first rule then the selectors' points are added together.
A useful way of visualizing this is using the Specificity Calculator. On that site you can paste in CSS selectors and see what the specificity score of the selector is. And it visualizes it in a way that makes it easy to understand why it gets that score.
Putting your rules through that site you can see that your first rule has a specificity of 11, while your second rule has a specificity of 10. Due to the fact that a class selector is worth 10 points and a tag selector is worth 1 point.
Katsumi Suno
4,194 PointsKatsumi Suno
4,194 PointsCool, never heard about that point-system so far. That will make things more clear. Thank you for your long and clear answer, really appreciate that!