CSS Specificity
Resources:
How to calculate
| Attribute | Value |
|---|---|
| Inline Style | (1,0,0,0) |
| ID | (0,1,0,0) |
| Class, Pseudo-Class, Attribute | (0,0,1,0) |
| Elements | (0,0,0,1) |
Example A
ul > li { ...; } .list > .list-item { ...; }
Here we have ul > li with (0,0,0,2) and .list > .list-item with (0,0,2,0), so the latter is prioritised.
Example Two
div#div > a:hover { ...; } a:nth-child(2):hover { ...; }
Here div#div > a:hover has (0,1,1,2) and a:nth-child(2):hover with (0,0,2,1) and so the first selector would be used.
Final Example
body #content .data img:hover { ... } = (0,0,0,1) + (0,1,0,0) + (0,0,1,0) + (0,0,0,1) + (0,0,1,0) = (0,1,2,2)