As “the Css guy” I am often looking around for easy ways to remember the various facets, tweaks and foibles of the language.

One of the things I have been toying with for a while is “specificity” of a css selector (basically, given two selectors for the same item, which one wins out?) I have often noticed that if you refrence somthing from a lower element of your site (for example div#wrapper div.content div.left a.biglink{color:blue}) it will have more weight (i.e it is more likely to actually be applied to the element) than just a.biglink. I came across this again recently where we had an element with an ID which then had a class added as a transformer (to change it slightly on another page). When referencing this in the css like this:
div#thisdiv{background:#ffffff}
div.transformer{background:#999999}

the ID would ALWAYS win out – it would always be white regardless of the presence of a transformation class. However, when you make a slight change and reference this as
div#thisdiv{background:#ffffff}
div#thisdiv.transformer{background:#999999}
(including the ID and the Class in the transfomer) it would win over the white when both the ID and the Class were present. This is specifity at work.

It was then I remembered an awesome resource I read a while back on the subject at Stuff and Nonsense which culminates in a fantastic little representation of how specificity works using star wars characters. See the full star wars chart here but be sure to read the article first.

What Andy does not cover is the use of inline styels in your HTML (thses will always override any css in an external style, no mater how specific) and the use of the contraversial !important tag (which essentialy overrides the specifity within the stylesheet – but many people see this as cheating!)

Eddie