CSS order and Internet explorer

Question

I have a problem when loading dinamycally CSS into IE.

I have different CSS files and I need to add these files to the head in a certain order. For Example I have a customer file that should have always the highest priority and I have to include at the beginning when reading the customer information.

So I have something like:

< head >  
     < link rel: "stylesheet",
        type: "text/css",
        href: "StartingCSS.css">  
     < link rel: "stylesheet",
        type: "text/css",
        href: CSSclient.CSS>  
< /head >  

In a certain moment I have to include to the head another css file specific for another module and using prototype and JavaScript I include this file the first one in the head, so I have something like this:

< head >      
     < link rel: "stylesheet",
        type: "text/css",
        href: "MyModule.css">  
     < link rel: "stylesheet",
        type: "text/css",
        href: "StartingCSS.css">  
     < link rel: "stylesheet",
        type: "text/css",
        href: CSSclient.CSS>  
< /head >  

In a normal browser, like chrome or FF the CSSclient file still has the highest priority because is the last one in the document but in IE the last file inserted is getting the power.

Someone has a great idea for me? :)

Thanks a lot, José

Answer 1

The order in which you load your CSS files has very little influence in how styles are applied. What styles are applied to a certain element is determined by the specificity of the selectors used in the CSS rule. A higher specificity overrules a lower specificity, even if the style with the lower specificity is declared later.

The specificity can be seen as a combination of four digits in the form (a,b,c,d) where a takes precedences over b and b over c and c over d. So (0,0,0,2) has a higher specificity than (0,0,0,1) and (0,0,1,0) has a higher specificity than (0,0,0,2).

The order of style declaration (i.e. the order in which style sheets are loaded) is only important if selectors are used with exactly the same specificity.

---

Update:

Updated the link with correct URL.