Monday, September 1, 2008

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 .

No comments: