CSS Link Pseudo-Classes ======================= see CSS Pseudo-Elements CSS pseudo-classes are used to add special effects to some selectors. The syntax of pseudo-classes: selector:pseudo-class {property:value;} CSS classes can also be used with pseudo-classes: selector.class:pseudo-class {property:value;} Pseudo-class names are not case-sensitive. All CSS Pseudo Classes/Elements ------------------------------- Selector Example Example description ---------------------------------------------------------------------------------------------------------------- :link a:link Selects all unvisited links :visited a:visited Selects all visited links :active a:active Selects the active link :hover a:hover Selects links on mouse over :focus input:focus Selects the input element which has focus :first-letter p:first-letter Selects the first letter of every

element :first-line p:first-line Selects the first line of every

element :first-child p:first-child Selects every

elements that is the first child of its parent :before p:before Insert content before every

element :after p:after Insert content after every

element :lang(language) p:lang(it) Selects every

element with a lang attribute value starting with "it" CSS Anchor Pseudo-classes ------------------------- a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!! a:active MUST come after a:hover in the CSS definition in order to be effective!! CSS Pseudo-classes and CSS Classes ---------------------------------- Pseudo-classes can be combined with CSS classes: a.red:visited {color:#FF0000;} CSS Syntax If the link in the example above has been visited, it will be displayed in red. CSS - The :first-child Pseudo-class ----------------------------------- The :first-child pseudo-class matches a specified element that is the first child of another element. For :first-child to work in IE8 and earlier, a must be declared. Match the first

element - - - - - - - - - - - - - - In the following example, the selector matches any

element that is the first child of any element:

I am a strong man.

I am a strong man.

Match the first element in all

elements - - - - - - - - - - - - - - - - - - - - - - - - In the following example, the selector matches the first element in all

elements:

I am a strong man. I am a strong man.

I am a strong man. I am a strong man.

Match all elements in all first child

elements - - - - - - - - - - - - - - - - - - - - - - - - - - - - In the following example, the selector matches all elements in

elements that are the first child of another element:

I am a strong man. I am a strong man.

I am a strong man. I am a strong man.

CSS - The :lang Pseudo-class ---------------------------- The :lang pseudo-class allows you to define special rules for different languages. IE8 supports the :lang pseudo-class only if a is specified. In the example below, the :lang class defines the quotation marks for q elements with lang="no":

Some text A quote in a paragraph Some text.

Example 1 ---------

Mouse over the links to see them change layout.

This link changes color

This link changes font-size

This link changes background-color

This link changes font-family

This link changes text-decoration

Example 2 ---------
First name:
Last name:

Note: IE8 supports the :focus pseudo-class only if a !DOCTYPE is specified.