css specificity

Every selector has its place in the specificity hierarchy. There are four distinct categories which define the specificity level of a given selector: 1. Inline styles (Presence of style in document).
An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g. <h1 style="color: #fff;">
2. IDs (# of ID selectors)
ID is an identifier for your page elements, such as #div.
3. Classes, attributes and pseudo-classes (# of class selectors).
This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
4. Elements and pseudo-elements (# of Element (type) selectors).
Including for instance :before and :after.


http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

the dark side 

how to feed a transparent PNG image to browsers which support transparency and a GIF image to older browsers which don't, without resorting to hacks. Here's the markup,

<div id="nav-supp">
<p><a id="a-02" href="#webstandards-org">Top</a></p>
<!-- etc. -->
</div>

and my CSS starting point.

a#a-02 { background-image : url(n.gif); }
a[id="a-02"] { background-image : url(n.png); }

I had assumed that a modern browser would see and apply both rules (with the second overriding the first) and that an older browser which does not understand attribute selectors would see and apply only the first, ignoring the second. I was wrong. Modern browsers did not apply the PNG image as I expected. The reason? A standard id selector wins over an attribute selector in terms of the cascade.

element selector

class selector

id selector
Sith power (specificity): 0, 0, 1
(1)
Sith power (specificity): 0, 1, 0
(10)
Sith power (specificity): 1, 0, 0
(100)




Each character (selector) is given its own Sith power (specificity value) depending on how powerful they are in the ways of the Dark Side. A storm trooper is less powerful than Vader who is in turn less powerful than the Emperor.