Pseudo-Classes

CSS pseudo-classes are used to add special effects to some CSS selectors.

Below is the syntax for writing pseudo-classes:

selector:pseudo-class { property:value; }

Class selectors can also be used with pseudo-classes:

selector.class:pseudo-class { property:value; }

Anchor pseudo-classes
Anchor links can be displayed in different ways in a CSS-supporting browser:

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 */ }

must come after  and   in the CSS definition in order to be effective and   must come after   in the CSS definition in order to be effective.

Note: Pseudo-class names are not case-sensitive.

Pseudo-classes and CSS class selectors
Pseudo-classes can be combined with CSS classes:

a.red:visited { color:#FF0000; } Red link if it has been visited.

: first-child
The  pseudo-class matches a specified element that is the first child of another element. For it to work in IE a  must be declared.

In the following example, the selector matches any  element that is the first child of any element:

p:first-child { color:blue; } I am a strong man. I am a strong man.

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

p > i:first-child { font-weight:bold; } I am a strong man. I am a strong man. I am a strong man. I am a strong man.

In the following example, the selector matches all  elements in   elements that are the first child of another element:

p:first-child i { color:blue; } I am a strong man. I am a strong man. I am a strong man. I am a strong man.

: lang
The  pseudo-class allows you to define special rules for different languages. Internet Explorer 8 (and higher) supports the  pseudo-class if a   is specified.

In the example below, the  class defines the quotation marks for   elements with  :

q:lang(no) { quotes: "~" "~"; } Some text A quote in a paragraph Some text.

: focus
The  pseudo-class allows you to add a special style to an element that has keyboard input focus, such as the color of an input field that gets focused. Internet Explorer 8 (and higher) supports the  pseudo-class if a   is specified.

In the example below, the  class defines a background color for the input box that is currently selected:

input:focus { background-color:yellow; }  First name: 

Last name: 



Pseudo-classes
Below is a chart that lists the pseudo-classes along with a brief description: