CSS Specificity Tutorial

specificity of css selectors

CSS Rules of Specificity

In the last post we tried to tell you that How Browser Apply CSS in a HTML document. We hope that it would have helped you understand this basic and very important rule. You should be now familiar to the cascading rule of cascading style sheets.

specificity of css selectors

Understanding CSS specificity

Now we are going to discuss another very important thing of CSS with you. It is called CSS specificity. To understand CSS and write CSS styles you should know CSS rules of specificity. As it is a very important part of CSS understanding so we have made this CSS specificity tutorial for you.

If you have an experience of writing CSS you would have noticed that your applied styles did not work for some times. It was not because you wrote them incorrectly but it was because of the CSS specificity. So in order to handle these kinds of issues you have to have a firm understanding on how specificity works in a browser. The more specific the rule is the more it is effective to an element.
It is determined by the CSS specificity that which CSS rule is applied by the browser in a document. The CSS elements have their own place in the hierarchy of the specificity. If a rule to an element is applied by one or more CSS selectors, the style of the selector will be applied who has a higher specificity.

CSS selector specificity calculation

The specificity is measured by the 4 distinct categories e.g. inline styles, Ids, Classes + attributes and elements. In a HTML document embedded CSS has a more specificity than any other rule. Then the Id selectors have a higher specificity than the attribute selectors. It is recommended to use Id selectors that will increase the specificity of your rules. A class has less specificity than Id selectors but more than any element selectors. You should keep in mind that the inherited and the universal selectors have a specificity of 0, 0, 0, 0 in a CSS document. A specific selector will have a greater specificity over a non specific rule. So try to be more specific if you want to get more specificity for an element.

CSS selector specificity chart | CSS selector specificity calculation

Let us see the table bellow to understand more about the CSS selector specificity. It will be easy for you to understand the specificity rules better with the help of this table below.

Selector ID Classes Elements Specificity
Body 0 0 1 1
#contents 1 0 0 100
Quote 0 1 0 10
div p 0 0 2 2
#rightMenu p 1 0 1 101

Comments