If you’ve ever written CSS you’ve probably run into issues related to CSS styles which are in conflict. For instance:

.blue { color: blue; }
#red { color:red; }

<p id=”red” class=”blue”>Sample Text</p>

The id is trying to make the text red and the class is trying to make it blue. Who wins? It all depends on specificity. Below is a table that explains CSS specificity.

Code Example

# of inline styles

# of ID selectors

# of Class selectors

# of Element selectors
p

0

0

0

1
p.error

0

0

1

1
#ecomm p.error

0

1

1

1

With the example above the text would be rendered red because the ID has higher specificity than the blue class. To figure out what style takes precedence you work your way across the table. Inline style? Nope. ID? Yes. then that rule is more specific. If they both have IDs then you move again to the right to classes and elements.

The above example would render the following:

p = 0,0,0,1 – not a very specific rule but will cascade quite nicely
p.error = 0,0,1,1 – the introduction of the class negates any piling up of elements (e.x body div ul li span em )
#special p.error – the ID  is higher in specificity. Attributes which are in conflict will use the ID’s attribute values.

For a full explanation see the W3C’s specification.