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):

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:

• 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:


Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Click on the function that adds new elements to the end of an array.
pop() shift() push()
var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download
Which function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()
$lang = array(10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
Pseudo-classes

Last accessed pages

  1. Get the value of the selected /checked checkboxes in a form (971)
  2. Working with getElementsByTagName (495)
  3. jQuery get XML data (159)
  4. HTML Meta tags for search engines (29)
  5. Chaining multiple jQuery effects (141)

Top accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (1932)
  2. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (1885)
  3. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (1831)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (1579)
  5. PHP Chat Script (1502)