Specificity Examples Demonstrating Selector Weighting
Declaration A B C D
.list {} 0 0 1 0
#todolist {} 0 1 0 0
#todolist .list {} 0 1 1 0
#todolist ul.list {} 0 1 1 1
body div#todolist ul.list {} 0 1 1 3
#pagetodo #todolist {} 0 2 0 0
There are two factors for deciding whether something has higher specificity:
??? The larger number at a certain level has a higher specificity. If you had used three
class selectors (level C) in a ruleset, and a second ruleset had two class selectors
(also level C), the first ruleset would have higher specificity than the second.
??? More importantly, a selector at a higher level has higher specificity than a number at a
lower level. If you had a ruleset with an id selector (level B) and a second ruleset with
three class selectors (level C) and an element selector (level D), the first ruleset would
have higher specificity than the second.
If you find that applying a style to an element isn??™t working, you might think to fall back
on the !important keyword to force the style. I recommend avoiding it if possible because it
CHAPTER 2 n HTML, CSS, AND JAVASCRIPT 20
limits the amount of flexibility you have (you then have to use !important along with a ruleset
with a higher specificity).
Another tip for keeping things simple is to use the fewest number of selectors possible to
style an element. Then, if you are having problems with specificity, you can look to add selectors
as needed.
Pages:
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64