CSS specificity helps determine when a style property will be applied regardless of where it appears in the style sheets. The more specific a style property is, the more likely it will be applied to the element. These simple steps will help you figure how how specific your style properties are.
Difficulty: Average
Time Required: 5 minutes
Here's How:
- Count the number of element names in the selector.
* { ... } is 0,
p { ... } is 1 and
div p { ... } is 2. - Count the number of pseudo-classes and other non-ID attributes in the selector, and multiply by 10.
:active { ... } is 10 and
.external:link { ... } is 20. - Count the number of ID attributes in the selector, and multiply by 100.
#hot { ... } is 100. - Add up all three numbers, and that is that property's specificity.
- div a { ... } = 2
- div.top a { ... } = 12
- #main div.top a { ... } = 112
- blockquote ul+li { ... } = 3
- h2 + a[title] { ... } = 12
- h2 + a[title]:active { ...} = 22
Tips:
- The higher the specificity number, the more likely it will be applied.
- Negative selectors are counted just like their simple selectors argument.
- Ignore pseudo-elements.
