Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
11. Divs and Spans: Advanced Web Constru... > Welcome to the “What’s my specificit...
Welcome to the “What’s my specificity game”
To calculate the specificity you start with a set of three numbers, like this:
Note
In the old days we used four numbers, but that was before XHTML... aren’t you glad you’re learning this now?
And then we just tally up various things from the selector, like this:
For instance, the selector “h1” has one element in it, so you get:
Note
Both “h1” and “h1.blue” have one element, so they both get a “1” in the right most number column.
As another example, the selector “h1.blue” has one element and one class, so you’d get:
After you’ve tallied up all the ids, classes, and elements, the bigger the specificity number, the more specific the rule. So, since “h1.blue” has a specificity of 11, it is more specific than “h1”, which has a specificity number of 1.
