[Specificity] #css

README.md

Specificity Hierarchy

There are four categories defining the level of specificity.

1. Inline styles - An inline style is attached directly to the element. EG. <h1 style="color: #ffffff;">.
2. IDs - An element ID is a unique identifier for an element in a DOM. EG. #navbar.
3. Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes like :hover, :focus etc.
4. Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before and :after.

Specificity Calculatation

At times, there will be ids, classes, and element's all attached to styling. Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element. The Rules for your reference.

Strongly suggest you use the Specificity Calculator.

Example:

Selector	Score
*	a=0 b=0 c=0 -> specificity = 0
LI	a=0 b=0 c=1 -> specificity = 1
UL LI	a=0 b=0 c=2 -> specificity = 2
UL OL+LI	a=0 b=0 c=3 -> specificity = 3
H1 + *[REL=up]	a=0 b=1 c=1 -> specificity = 11
UL OL LI.red	a=0 b=1 c=3 -> specificity = 13
LI.red.level	a=0 b=2 c=1 -> specificity = 21
#x34y	a=1 b=0 c=0 -> specificity = 100
#s12:not(FOO)	a=1 b=0 c=1 -> specificity = 101