This document discusses CSS selector specificity and how specificity is calculated. It provides examples of different CSS selectors and their specificity values. It also notes that !important will override other selectors with equal specificity and that more class selectors are needed to outscore an id selector.

1. CSS Selector Specificity

3. Which color is the element?
<ul id="names">
<li>Gal</li>
<li>Asaf</li>
<li>Roy</li>
</ul>
ul#names li {
color: red;
}

4. Which color is the element?
<ul id="names">
<li>Gal</li>
<li>Asaf</li>
<li class=”ios”>
Roy
</li>
</ul>
.ios {
color: green;
}

5. ul#names li {
color: red;
}
Which color is the element?
.ios {
color: green;
}

6. To the CALC machine!

7. ul#nav li.last 0 1 1 2

8. body.fbs_2 a[href] span 0 0 2 3

9. <li style=”color: red”> 1 0 0 0

10. ul li ul li ol a:first-letter 0 0 0 7

11. li.last { color: red !important;} 1 0 0 0 0

12. ul#names li {
color: red;
}
Trump card
.ios {
color: green !important;
}

13. li.last {
border-top: none !important;
}
a {
text-decoration: none !important;
}
When it makes sense

14. What if scores are equal?

15. How many class names outscore an id?

16. .c1.c2.c3.c4.c5.c6.c7.c
8.c9.c11.c12 0 0 12 0
#id1 0 1 0 0