Attribute Selectors for IDs
Note that [id="foo"] is not equivalent to #foo??”you can see there??™s a significant
difference in their levels of specificity.
In our example selector, body#home div#warning p.message, there??™s one class
selector, .message, so, as you can see in Table 5.4, c is equal to 1.
Table 5.4: Column c = 1
Element Types and
Pseudo-elements
Classes, Attributes, and
Pseudo-classes
IDs Inline Style
? 1 2 0
Finally, for column d, we count the number of element type selectors and
pseudo-elements in the selector. In our example selector, body#home div#warning
p.message, there are three: body, div, and p. There are no pseudo-elements to be
counted, so we put a 3 in the last column, as Table 5.5 shows.
Table 5.5: Column d = 3
Element Types and
Pseudo-elements
Classes, Attributes, and
Pseudo-classes
IDs Inline Style
3 1 2 0
We now have our result. The specificity for the selector body#home div#warning
p.message can be expressed as: 0,2,1,3.
131 The Cascade, Specificity, and Inheritance
All right, let??™s consider a crazy situation where more than half a dozen color
declarations for the same p element have the same levels of importance and origins.
Pages:
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201