Pseudo-classes

Pseudo-classes allow adding CSS rules to certain parts of the same selector.
For example, when you define a style for an HTML tag or a particular class, the content of all those tags or class will have the same style. If you want to define a different style for the first (or last) element of those tags or for the first content of a group of elements with the same class, you can accomplish this by using pseudo-classes.
Also, they can change the graphic style of items when the mouse is acting on them.
To work in Internet Explorer 7+ is required a <! DOCTYPE> declaration, which is added to the top of the HTML document.


  - Syntax: Or, used with class:   - Values:
To understand CSS pseudo-classes, how they work and what is their effect, study the following examples.

1. Pseudo-classes with type selector

Type selectors refer to HTML tags which they define (eg.: p for <p>, li for <li>, div for <div>, etc.).
In the following example is used "first-child" with paragraphs:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-classes - Ex. 1</title>
<style type="text/css"><!--
p:first-child {
 color:blue;
}
--></style>
</head>
<body>
<p>A text within the first paragraph</p>
<p>Content in the second paragraph</p>
<p>Text content in the third paragraph</p>
</body>
</html>
  - Result (first paragraph will have blue text):

A text within the first paragraph

Content in the second paragraph

Text content in the third paragraph


• Other example, with the hover value applied to <li> tags.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-classes - Ex. 2</title>
<style type="text/css">
li:hover {
  background-color:#88fe88;
}
</style>
</head>
<body>
<ul>
  <li>Free courses and tutorials</li>
  <li>Web site: http://coursesweb.net</li>
  <li>Web site: www.marplo.net</li>
</ul>
</body>
</html>
  - Result (When you place the mouse over each LI, it will have green background. Test below):
  • Free courses and tutorials
  • Web site: http://coursesweb.net
  • Web site: www.marplo.net

2. Pseudo-classes with class

Pseudo-classes are not the same with classes. The classes refer to the value of a class attribute, in stylesheets are added after a (.) character.
In the next example are used "lang" and "last-child" applied to a class '.test':
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-classes - Ex. 3</title>
<style type="text/css">
.test:last-child {
  background-color:#88fe88;
}
.test:lang(en) {
  color:blue;
}
</style>
</head>
<body>
<ul>
  <li class="test">HTML: http://coursesweb.net/html/</li>
  <li class="test" lang="en">CSS: http://coursesweb.net/css/</li>
  <li class="test">JavaScript: http://coursesweb.net/javascript/</li>
</ul>
</body>
</html>
The CSS style defined for "test: last-child" will be applied only to the last element that has class "test"; the CSS rule added to ".test:lang(en)" is applied only to the element that has both class="test" and lang="en" attributes.
  - Result:
  • HTML: http://coursesweb.net/html/
  • CSS: http://coursesweb.net/css/
  • JavaScript: http://coursesweb.net/javascript/

• Here is other example, where are combined a class (test), a type selector <i> tag and "first-child".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-classes - Ex. 4</title>
<style type="text/css"><!--
/* Applies to the first <i> tag of every element with class="test" */
.test i:first-child {
  font-weight: bold;
  color: blue;
}
--></style>
</head>
<body>
<p class="test">Paragraph with three I tags: <i>blue text</i>, a <i>second I tag</i>, and another <i>italic text</i>.</p>
<p class="test">Another paragraph: <i>a bold-italic blue string</i>, and a second <i>oblique sub-string</i>.</p>
</body>
</html>
The CSS rule will be applied to first <i> tags of every 'test' class.
  - Result:

Paragraph with three I tags: blue text, a second I tag, and another italic text.

Another paragraph: a bold-italic blue string, and a second oblique sub-string.

3. Pseudo-classes with ID and form elements

In the fallowing example is used the "hover" pseudo-class applied to an ID, and the "focus" pseudo-class to a class (test).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-classes - Ex. 5</title>
<style type="text/css"><!--
#idb:hover {
  background-color:#78fe88;
}
.test:focus {
  background-color:#ededfe;
}
--></style>
</head>
<body>
<form action="" method="post">
  <input type="text" class="test" /><br />
  <textarea cols="20" rows="5" class="test"></textarea><br />
  <input type="button" value="Button" id="idb" />
</form>
</body>
</html>
When the mouse is over the button (having id="idb") makes its background color green, and, when you click on the text areas of the form it changes their background color. Test it yourself.
  - Result: