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 allelements - - - - - - - - - - - - - - - - - - - - - - - - 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 childelements - - - - - - - - - - - - - - - - - - - - - - - - - - - - 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.
Mouse over the links to see them change layout.
This link changes background-color
This link changes text-decoration
Example 2 ---------Note: IE8 supports the :focus pseudo-class only if a !DOCTYPE is specified.