Home --- Topics --- Articles --- Offers --- Register --- Contact us

Did you know?

if you register at Hamid School you can save up to 45% on hosting packages offered by Surreyhost.com .

Don't miss out, every minute counts!

Are you Confused? Click here to learn how to use hamid school

CSS Pseudo classes

Syntax

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}

Anchor Pseudo-classes

A link that is active, visited, unvisited, or when you mouse over a link can all 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 */

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 and CSS Classes

Pseudo-classes can be combined with CSS classes:

a.red:visited {color: #FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

If the link in the example above has been visited, it will be displayed in red.

CSS2 - The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.

Note: For :first-child to work in IE. A <!DOCTYPE> must be declared.

Match the first element

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

<html>
<head>
<style type="text/css">
p:first-child
{
font-weight:bold
} 
</style>
</head>

<body>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
</body>
</html>

Match the first element in all elements

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

<html>
<head>
<style type="text/css">
p > em:first-child
{
font-weight:bold
} 
</style>
</head>

<body>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
</body>
</html>

Match all elements in all first child elements

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

<html>
<head>
<style type="text/css">
p:first-child em
{
font-weight:bold
} 
</style>
</head>

<body>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
</body>
</html>

CSS2 - The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages. In the example below, the :lang class defines the type of quotation marks for q elements with a lang attribute with a value of "no":

<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>

</html>

Pseudo-classes

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Pseudo-class	Purpose	IE	F	N	W3C
:active	Adds special style to an activated element	4	1	8	1
:focus	Adds special style to an element while the element has focus	-	1.5	8	2
:hover	Adds special style to an element when you mouse over it	4	1	7	1
:link	Adds special style to an unvisited link	3	1	4	1
:visited	Adds special style to a visited link	3	1	4	1
:first-child	Adds special style to an element that is the first child of some other element	7	1	7	2
:lang	Allows the author to specify a language to use in a specified element	-	1	8	2

Questions about 'CSS Pseudo classes':

Viewed:427

12-Jul-2008
Original Author: W3school however, some changes have been made to the main contents. Related articles:

Did you know?

if you register at Hamid School you can learn web programming and designing for free and also you can save up to 45% on hosting packages offered by Surreyhost.com .

Don't miss out, every minute counts!

Links

Sponsored by: Surreyhost.com

Coded and designed by: Hamid Moudi
HPLA
Follow us: