Selector Specificity

When two or more CSS rules target the same (X)HTML document element, the style that is applied to the element is determined by a system called selector specificity. Selector specificity is just a system to calculate how specific a particular CSS selector is. Among two or more CSS selectors, the most specific selector is the one that is applied to the element.

Calculating Specificity

Inline styles have the highest specificity. Second highest in specificity are ID selectors, third are Class selectors, Pseudo-Class selectors and Attribute selectors and last are Element Type selectors and Pseudo-Element selectors.
A selector chain with more than one selector of a specific kind is more specific than a selector chain that has only one or fewer selectors of that kind. An example will make this clear. Assume that the following two CSS selector chains target the same (X)HTML element:
img { float: right; }
div p img { float: left; }
The second CSS rule is more specific because it has more Element Type selectors. Therefore, the second CSS rule will be applied to the element.
When determining the specificity of CSS selectors, it is convenient to represent the specificity as four comma separated numbers - 0,0,0,0 . Each number represents one kind of selector - starting from the left and with the highest specificity - inline styles, and next, ID selectors, and next, Class, Pseudo-Class Selectors and Attribute selectors, and last, with the lowest specificity, Element Type selectors and Pseudo-Element selectors. Each instance of a particular kind of selector is calculated as one point.
Example:
#menu ul li a:link
The selector has one ID selector - #menu, therefore 1 should be added to the third digit (from the right) - 0,1,0,0 . The selector has one Pseudo-Class selector - :link, therefore 1 should be added to the second digit (from the right) - 0,1,1,0 . The selector has three Element Type selectors - ul li a , therefore 3 should be added to the first digit (from the right) - 0,1,1,3 . The element does not have any inline styles therefore the last digit is zero.
The universal selector (*) has a specificity of zero, but this does not mean it has no specificity. Combinators - the space character, the greater-than symbol, the tilde and the plus sign - have no effect on specificity.

Pseudo-Element and Pseudo-Class Selectors

There are some selectors that are not names of (X)HTML elements. They are not classes or ID's either nor are they attribute names or attribute values. These selectors are pseudo-element selectors and pseudo-class selectors.

Pseudo-element selectors

These are CSS selectors that target "virtual elements" - smaller parts of elements. In CSS2, pseudo-element selectors begin with a colon (:). In CSS3, pseudo-element selectors begin with two colons (::). These are the pseudo-elements: :first-letter , :first-line , :before , :after and ::selection . Pseudo-elements should always appear at the end of a selector chain. Therefore, there can be only one pseudo-element in a selector.

Pseudo-class selectors

These are CSS selectors that target parts of an (X)HTML element based on its dynamic state, language or position in the (X)HTML tree. Unlike pseudo-elements, pseudo-classes can appear anywhere in the selector chain. Pseudo-classes begin with a colon (:). These are the widely supported pseudo-classes:
:link , :visited , :focus , :hover , :active , :lang() and :first-child .

General Sibling Selector

The combinator for this selector is the tilde character (~). The General Sibling Selector targets an element that is a sibling of another element - that is, they have the same parent. However, in the General Sibling Selector, the first selector must appear before the second selector in the (X)HTML document.
Example: p ~ ol {border: solid 1px black;}
The General Sibling Selector is ignored by IE6

Adjacent Sibling Selector

The meaning of sibling in general language is brother or sister. In (X)HTML it means any elements that are in the same level in the document tree. In other words, sibling elements are those that have a common parent; they are contained in the same element. Adjacent sibling elements are those that are next to each other and are contained in the same element.
An adjacent sibling selector selects a sibling element that comes immediately after a particular element. The combinator of the adjacent sibling selector is the plus sign + . Remember, the element that is first in the (X)HTML document must also appear first in the selector.
Example: h1 + p {background-color:green;}
Note: The Adjacent Sibling selector is not supported by IE6 (it is ignored).

Child Selector

Using the > combinator between two selectors, you can target child elements only. Example: div > p
The above selector targets only those p elements that are children of div elements. Grand children, great grand children etc. won't be targetted.
Note: IE6 does not support child selectors (it ignores them)