Cascading Style Sheets – Pseudo classes

CSS provides few interesting pseudo classes. It started with CSS 1 when the :link, :visited, and :active pseudo-classes were introduced. But it applied only to an HTML a element. In CSS 2 :hover and :focus were brought into list of pseudo classes along with :lang and :first-child class.

Link pseudo-classes

An Hyper link has four states unvisited link, visited, active and hover. Using CSS these can be defined as
:link pseudo class is used for links in not visited state.
:visited pseudo class is used for links visited by user.
:hover pseudo class is applies to links over which mouse pointer is stationed.
:active pseudo class is used for links activated (clicked upon) by user.

Syntax
a:link {color: #FF0000;} /* an unvisited link */
a:visited {color: #00FF00;} /* a visited link */
a:hover {color: #FF00FF;} /* a link with the mouse hovering over it */
a:active {color: #0000FF;} /* the selected link */

Example
< html>
< head>
< style>
a:link {color: blue;} /* an unvisited link */
a:visited {color: orange;} /* a visited link */
a:hover {color: red;} /* a link with the mouse hovering over it */
a:active {color: green;} /* the selected link */
< /style>
< /head>
< body style=”font-size=x-large”>
<a href=”http://www.infojinx.com”>Click here for Infojinx.com home page</a>
< /body>
< /html>

Important These CSS styles should be used exactly in above order. Otherwise, the hover and active styles won’t work right.

First child pseudo class

This CSS pseudo-class allows you to select only the first child of an element. like you want have first h1 heading of body to have color different from other headings.

Syntax
selector::first-child {style rule}

Example
CSS code
body > h1:first-child {color: red;}
HTML code
<h1>This heading is red</h1>
< h1>this heading isn’t red.</h1>

Syntax
selector { position: fixed; coordinates of position of direction left, right, top bottom as required;
Example
p.fixed { position: fixed; top:100px; right:80px; }
Language pseudo class

 This CSS pseudo class apllied when defined language appears in browser

Syntax
:lang(define language in html code) { styling rule}

Example
:lang(gmb) { font-weight: bold; }