Specificity

Specificity

  • If one selector is more specific than others, then the more specific rule takes precedent

  • For example:

    • h1 is more specific than *
    • p.discount is more specific than p
    • #city is more specific than img.town

Live Example

JS Bin on jsbin.com

In the example above #featured is more specific than .box so the background-color of the element will be red even though .box is listed after #featured