Understanding The Complexity Of CSS Specificity

CSS Specificity is one of the most difficult concepts to understand in the Cascading Stylesheet, and often the typically rules applied to CSS development do not apply with CSS specificity. In order to properly code and reduce the time it takes you need to carefully consider and understand how your code will be interpreted by browsers. To ensure your code is readable, you need to completely understand how CSS specificity works.

What Is CSS Specificity?

In simple terms, the specificity refers to which CSS rules are applied by a browser. Not having the proper understanding of CSS specificity will results in some of the rules not being applied in the browser even though you may think they should. Specificity operates on a hierarchy. This hierarchy consists of four distinct levels:

  • Inline Styles – The inline styles are those attached directly to the element you are styling. They are created within your XHTML document.
  • IDs- The IDs are the identifiers for page elements often presented as #div.
  • Classes + Attributes- The classes and attributes are coded using: .classes or [attributes]. Pseudo-classes are often including in the classes and attribute level.
  • Elements- Elements and pseudo elements all you to assign styles to the context, they are specific and unique allowing you to create content spontaneously.

Often times two selectors are writing on the same element but with specificity both of these selectors are not applied. The element the presents the higher specificity will be the one applied and will override any conflicting rules or previously applied rules.  If theses selectors have an equal value of specificity the most recent one added is the one that will be applied.

Understanding CSS Specificity Levels:

Embedded style sheets will present a greater specificity than most other rules. ID selectors, however, will have higher specificity than your attribute selectors and you should aim to always use ID selectors to increase the specificity. Class selectors will always be applied to any element selector. Universal selectors will have a specificity of 0,0,0,0.

You can use a CSS specificity calculator to assist you in calculated the CSS Specificity or you can apply some simple rules to help you better understand CSS Specificity. To measure specificity, you begin at 0, for each inline style attribute you add 1000, for each ID attribute you add 100, for each class or pseudo-class attribute you add 10 and for any element you add 1.

You can make a rule more specific by using ID selectors. When you find yourself having an issue with CSS Specificity avoid the use of !important. This coding will only override the normal declarations and provides no structure to the style sheet. Instead, try to limit the selectors you are including or make the rule more specific.

Once you understand how specificity is applied to your coding you can more easily assure a better design. Knowing how certain attributes, elements, and selector are interpreted through the browser will allow you to create a more functional and proper design.

CSS Specificity Examples

So how Specificity actually is done.

1 * { } 0
2 li { } 1 (one element)
3 li:first-line { } 2 (one element, one pseudo-element)
4 ul li { } 2 (two elements)
5 ul ol+li { } 3 (three elements)
6 h1 + *[rel=up] { } 11 (one attribute, one element)
7 ul ol li.red { } 13 (one class, three elements)
8 li.red.level { } 21 (two classes, one element)
9 style=”” 1000 (one inline styling)
10 p { } 1 (one HTML selector)
11 div p { } 2 (two HTML selectors)
12 .sith 10 (one class selector)
13 div p.sith { } 12 (two HTML selectors and a class selector)
14 #sith 100 (one id selector)
15 body #darkside .sith p { } 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

Leave a Reply