Prev | Current Page 190 | Next

Tommy Olsson and Paul O'Brien

"The Ultimate CSS Reference"


Which color would the browser apply to the element?
Here??™s our crazy style sheet:
p.message {
color: green;
}
#home #warning p.message {
color: yellow;
}
#warning p.message {
color: white;
}
body#home div#warning p.message {
color: blue;
}
p {
color: teal;
}
* body#home>div#warning p.message {
color: red;
}
#warning p {
color: black;
}
We should be able to use the specificity calculation method to work out which of
the declarations would be applied. But, wait a minute! What are the levels of
specificity of the universal selector (p. 60), *, and the child combinator (p. 76), >?
The answer is that they don??™t have any specificity at all; they??™re simply ignored in
all calculations. This is true for all combinators, which you can treat as though they
had a specificity of zero, as they will make no difference to your calculation. After
all, five out of the seven selectors above use the descendant combinator (p. 74) and
you weren??™t worried about those!
See if you can work out the specificity of all the selectors above for yourself before
looking at the answer in Table 5.


Pages:
178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202