CSS pseudo-classes are used to add special effects to some selectors.
The syntax of pseudo-classes:
CSS classes can also be used with pseudo-classes:
Links can be displayed in different ways in a CSS-supporting browser:
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
Note: Pseudo-class names are not case-sensitive.
Pseudo-classes can be combined with CSS classes:
If the link in the example above has been visited, it will be displayed in red.
The :first-child pseudo-class matches a specified element that is the first child of another element.
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
In the following example, the selector matches any <p> element that is the first child of any element:
In the following example, the selector matches the first <i> element in all <p> elements:
In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:
The :lang pseudo-class allows you to define special rules for different languages.
Note: IE8 supports the :lang pseudo-class only if a <!DOCTYPE> is specified.
In the example below, the :lang class defines the quotation marks for q elements with lang="no":
styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.
Use of :focus
This example demonstrates how to use the :focus pseudo-class.
|: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 <p> element|
|:first-line||p:first-line||Selects the first line of every <p> element|
|:first-child||p:first-child||Selects every <p> elements that is the first child of its parent|
|:before||p:before||Insert content before every <p> element|
|:after||p:after||Insert content after every <p> element|
|:lang(language)||p:lang(it)||Selects every <p> element with a lang attribute value starting with "it"|
Your message has been sent to W3Schools.