2009.02.16 16:58:52
Susan Jackman

CSS Specificity, CSS Inheritance, and a few more CSS tips

You may have experienced the effects of specificity in a number of ways.  Perhaps you have applied a hover effect to a link only to be left scratching your head wondering why it’s not working.  Or perhaps you have noticed that if you move a declaration further down in your CSS file it magically seams to work.  Both of these examples are caused by CSS specificity, a difficult to understand concept for beginners and pros alike.

If you're using simple CSS documents, you may think that specificity really doesn't matter. But the larger and more complicated your CSS style sheets get, the more conflicts you're going to have.


Overview

By definition, specificity determines which CSS rule is applied by the browsers.  There is a specificity hierarchy, and each element in you CSS has a rank in that hierarchy.  There are many factors that contribute to an elements specifity.

Specificity value

To calculate the specifity for each selector, a numeric value is assigned.  The specifity value is assigned by adding the values of each selector each with a base of 10.

  • Inline Styling = 1000
  • ID value (such as a #div) = 100
  • Class value (or pseudo-class or attribute selector) = 10
  • Element reference = 1

It is also important to note that if the selectors are the same then the latest one (last property to be read) will always take precedence because it is closest to the element.  So if you had:

p { color: blue; }

p { color: yellow; }


Your paragraph text is going to end up yellow.  This is also applied not only to styles in the same style sheet but styles applied in multiple style sheets as well.   The order of import will dictate which style sheet is read last.

Inheritance

Some values are inherited by the children of an element in the document tree. Each property defines whether it is inherited or not.


Suppose there is an H1 element with an emphasizing element (EM) inside:

The headline is important!


If no color has been assigned to the EM element, the emphasized "is" will inherit the color of the parent element, so if H1 has the color blue, the EM element will likewise be in blue.


Normally in CSS whichever rule is specified last takes precedence. However if you use !important after a command then this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE 6 and older.  This is a useful tool to isolate a problem with specifity. The !important rule allows you to control which rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, you would use:


p { color: #ff0000 !important; }

p { color: #000000; }

!important rule

It is important to remember that the !important rule was also put in place to help Web page users cope with style sheets that might make pages difficult for them to use or read. Typically, if a user defines a user style sheet to view Web pages with, that style sheet will be over-ruled by the Web page author's user style sheet, even if the author marks their rule as !important.

So how is this rule useful to designers and developers?

One of the best ways to not have to hack our code to make things work for various browsers is to take advantage of their limitations. Internet Explorer 6 and older versions ignore the !important decleration while IE 7 supports it, therefore we can take advantage of this.

For example:

IE 6 does not support the CSS properties of max-width and min-height.  These parameters are commonly used to specify that a div container (usually a wrap) have a minamum size so that in a larger resolution the div will be fluid but in at a smaller resolution the div will stop flowing at a certain width or height.

Since IE 6 and older do not support max-width, min-width,  or !important we can set the width of the page to what we want the min width to be:

#main {

margin: 0 auto 0:

width: 800px;

}

and then add the rule we want followed by newer browsers specified with !important.

#main {

margin: 0 auto 0:

width: 800px;

max width: 900px;

min width: 770px;

width: auto !important;

}


The newer browsers will ignore that width:800px because the rule width:auto !important; has precedence.

 


  IE 6 | IE 7 | CSS | Tips | Susan Jackman