Open Directory Site CSS Tutorials

This example demonstrates how to add different colors to a hyperlink in a document.

This example demonstrates how to add other styles to hyperlinks.

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}

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:active {color: #0000FF} /* selected link */

a:visited {color: #00FF00} /* visited link */

a:link {color: #FF0000} /* unvisited link */

a:hover {color: #FF00FF} /* mouse over link */

The example above displays an unvisited link in red, a visited link in green, and an active link, that is a link that has been selected, in blue.

Note: IE 4.01, IE 5.0, and IE 5.5 supports the anchor pseudo-class.

Note: NN 4.5 supports the anchor pseudo-class only partially.

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.

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

In this example, the selector matches any p element that is the first child of a div element, and indents the first paragraph inside a div element:

div:first-child p { text-indent:25px }

This selector will match the first paragraph inside the div in the following HTML:

<div>

<p> First paragraph in div. This paragraph will be indented. </p>

<p> Second paragraph in div. This paragraph will not be indented. </p> </div>

but it will not match the paragraph in this HTML:

<div>

<h1>Header</h1>

<p> The first paragraph inside the div. This paragraph will not be indented. </p>

</div>

In this example, the selector matches any em element that is the first child of a p element, and sets the font-weight to bold for the first em inside a p element:

p:first-child em { font-weight:bold }

For example, the em in the HTML below is the first child of the paragraph:

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

In this example, the selector matches any a element that is the first child of any element, and sets the text-decoration to none:

a:first-child { text-decoration:none }

For example, the first a in the HTML below is the first child of the paragraph and will not be underlined. But the second a in the paragraph is not the first child of the paragraph and will be underlined:

<p> Visit <a href="http://www.w3schools.com>W3Schools</a> and learn CSS! Visit <a href="http://www.w3schools.com>W3Schools</a> and learn HTML! </p>

The :lang pseudo-class allows the author to specify a language to use in a document or to use in a specified element.

In the example below, the rule sets the type of quotation marks for an HTML document that is in Norwegian:

html:lang(no) { quotes: '« ' ' »' }

In the next example, the rule sets the type of quotation marks for blockquote elements:

blockquote:lang(no) { quotes: '« ' ' »' }