If you are new to Cascading style sheet (formerly know as CSS) or reached a mediocre level, then CSS Specificity will help you a lot. A few questions that might be striking you mind could be What is CSS Specificity? When will this concept help you, while you converting any PSD to HTML? Which type of problem occurs in future when you are designing any web pages if you do not understand this topic.?

So let’s understand CSS Specificity. Have you ever faced any problems, when some CSS rules  doesn’t apply to some elements although they should have? The main reason behind that is the different weight of selectors. Specificity is a means by which Browsers decide which CSS property value have a higher importance. In short, Specificity determines, which CSS rule is applied by the browser. Every selector types having their own weights, by which specificity increases, before going to selector’s weight it is important to know about different types of selectors.

CSS Specificity – Selectors Types

(1) Type Selector
(2) Pseudo-elements
(3) Class selector
(3) ID selector
(4) Attributes Selectors
(5) Pseudo-classes

CSS specificity Hierarchy

The following list of selector types is in order of increasing specificity:
(1) Inline Style Attributes >
(2) ID selector >
(3) Class selector, Pseudo-classes >
(4) Type selector

CSS Specificity in Type Selectors:

In Type selectors the specificity increases with increasing depth of HTML tree. Let’s see an example on that.

<style>
	body {
		background-color: yellow;
	}
	div {
		color: red;
	}
	p {
		color: blue;
	}
	h1 {
		color: green;
	}
	.heading {
		color: pink;
	}
</style>

This is a Paragraph

So from above example, you observe that, by increasing HTML depth specificity increases.

Class selectors in CSS Specificity

Inside type selector if some elements having a class selector, then only attributes mentioned under the class will be applied to the specific element containing that class.

<style>
	body {
		background-color: yellow;
	}
	div {
		color: red;
	}
	p {
		color: blue;
	}
	h1 {
		color: green;
	}
	.heading {
		color: pink;
	}
</style>

This is a Paragraph

Inline style in CSS Specificity

Inline style has the highest priority and is above ID, Class or type selects.

<style>
	body {
		background-color: yellow;
	}
	div {
		color: red;
	}
	p {
		color: blue;
	}
	h1 {
		color: green;
	}
	.heading {
		color: pink;
	}
</style>

The last rule defined overrides any previous conflicting rule

Example

P {
	Color: red;
}
P {
	Color: green
}

So the paragraph would appear in green text.

How to calculate CSS Specificity?

A = Count if an element has inline style

B = Count the number of IDs

C = Count the number of Classes, Pseudo-classes

D = Count the number of Type Selector

Calculation:

Value: A, B, C, D

Example 1:

ul:#nav li.first a

A = 0, B = 1, C = 1, D = 3

So value = 0113

Example 2:

div.menu div.first: #ID1

A = 0, B = 1, C = 2, D = 2

So value = 0122

So here Example 2 selector having higher specificity.

So hope it is now clear, how to calculate specificity of an any selector.

In a HML tree, if selector having two different ID at different levels, ID having attributes values at higher depths will be applied to selector.

<div id=”ID1”>
	<div id=”ID2”>Text</div> 
</div>

div:#ID1 div:#ID2

Specificity value = 0202

So here ID2 Attributes value wins over ID1.

For more such posts follow us on Facebook. 🙂