Pseudo-classes

Pseudo-classes define the dynamic state of the elements, which changes with time or with the help of the user’s actions, and also in the tree of the document. As the example of such a state the text link, which changes its color while pointing on it with the mouse cursor, can be presented. While using the pseudo-classes the browser doesn’t overload the current document, that’s why with their help it is possible to receive the different dynamic effects on the page.
The syntax of the pseudo-classes appliance is the following:

Element: Pseudo-class { the description of the style rules }

In the beginning comes the element, to which the pseudo-class is added, then the colon is pointed, after which the name of the pseudo-class goes. It is allowed to apply the pseudo-classes to the names of the identifiers or classes (A.menu:hover {color: green})and to the context selectors (.menu A:hover {background: #fc0}).

Conditionally, all the pseudo-classes are divided into the groups, which are listed below.

Pseudo-classes, which define the state of the elements

To this group the pseudo-classes, which define the current state of the element and apply the style to it only in this case, are applied.

Active

Takes part when the user activates the element. For example, while the cursor is inducted on the link and while pushing the left button of the mouse.

Link

Is applied to the unvisited links, i.e. to the links, which hasn’t been pushed by the user yet. The browser, though, saves the history of the visits for some time, that’s why the link can be marked as the visited one at least because there was the crossing fixed on it before.

Note

The entry A {...} and A:link {...} by its result is equivalent, as it give the same effect in the browser, that’s why the pseudo-class link can be unspecified.

Focus

Is applied to the element when it receives the focus. For example, for the text field of the form the receiving of the focus means that the cursor is set in the field and with the help of the key-board it is possible to impose the text in it (the example 16.1).

Example 16.1. The use of the pseudo-class FOCUS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Pseudo-classes</title>
  <style type="text/css">
   INPUT:focus { 
    color: red; /* red text color */
   }
  </style>
 </head>
 <body>
  <form action="">
   <p><input type="text" value="Black text"></p>
  </form>
 </body>
</html>

In this example the text field contains the preliminary text, it is defined by the meaning of the parameter VALUE of the TAG <INPUT>. While clicking on the form of the element the receipt of the focus by the field happens, and the text color changes to red. It is enough to click in any place of the page (except the text field) and the loose of the focus will take place and the text will return to its primary black color.

Note 1

The result will be seen only for the elements, which can get the focus. Particularly, these are tags <A>, <INPUT>, <SELECT> and <TEXTAREA>.

Note 2

Pseudo-class FOCUS is not supported the browser Internet Explorer.

hover

Pseudo-class HOVER is activated, when the cursor of the mouse is located in the limits of the element, but the click on it doesn’t happen.

visited

This pseudo-class is applied to the visited links. Usually, such a link changes its color by default into the violet, but with the help of the styles, color and other parameters can be set independently (example 16.2).

Example 16.2. The link color changing

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Pseudo-classes</title>
  <style type="text/css">
   A:link { 
    color: #036; /* The color of the unvisited links */
   }
   A:visited { 
    color: #606; /* The color of the visited links */
   }
   A:hover { 
    color: #f00; /* The color of the link while bringing the cursor to it */
   }
   A:active { 
    color: #ff0; /* The color of the active links */
   }
  </style>
 </head>
 <body>
  <p>
   <a href="link1.html">Link 1</a> | 
   <a href="link2.html">Link 2</a> | 
   <a href="link3.html">Link 3</a></p>
 </body>
</html>

The result of the example is shown in the figure 16.1.



Fig.16.1. The view of the link while moving the mouse cursor on it

In this example it is shown the use of the pseudo-classes together with links. Meanwhile the order of the pseudo-classes movement matters. In the beginning it is shown VISITED, and then comes HOVER, otherwise the visited links wouldn’t change its color while moving the cursor on it.

Pseudo-classes LINK and VISITED can be applied only to the links and pseudo-classes ACTIVE and HOVER also to another elements of the documents. It broadens the list of actions and allows creating the effect of rolling, when the style of the element changes while moving the cursor on it.

Note

The browser Internet Explorer 6 and younger allows to use pseudo-classes ACTIVE and HOVER only for the links. Starting from the version 7.0 pseudo-classes in this browser can be added to the other elements as well.

Example 16.3. Highlighting of the table lines

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Pseudo-classes</title>
  <style type="text/css">
   TR:hover {
    background: #fc0; /* Changing the background color of the table line */ 
   }
  </style>
 </head>
 <body>
  <table width="400" border="1" cellpadding="4" cellspacing="0">
   <tr> 
    <th>&nbsp;</th>
    <th>Spades</th>
    <th>Clubs</th>
    <th>Diamond</th>
    <th>Hearts</th>
   </tr>
   <tr> 
    <td>Cheburashka</td>
    <td>5</td>
    <td>2</td>
    <td>4</td>
    <td>2</td>
   </tr>
   <tr> 
    <td>Gena crocodile</td>
    <td>2</td>
    <td>7</td>
    <td>1</td>
    <td>3</td>
   </tr>
   <tr> 
    <td>Opers hat</td>
    <td>5</td>
    <td>4</td>    
    <td>3</td>
    <td>1</td>
   </tr>
   <tr> 
    <td>rat Larisa</td>
    <td>1</td>
    <td>0</td>
    <td>5</td>
    <td>7</td>
   </tr>
  </table>
 </body>
</html>

The result is shown below.

Pseudo-classes, related to the tree of the document

To this group pseudo-classes are applied, which define the position of the element in the tree of the document and which apply to it the style subject to its status. These classes are not numerous, but some browsers enlarge this list, for example, Netscape supports quite large number of such pseudo-classes, which can be related to the given group.

First-child

Is applied to the first affiliated selector element, which is located in the tree of the document elements. To make it clear, let’s investigate the small code (example 16.4).

Example 16.4. The use of the pseudo-class first-child

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Pseudo-classes</title>
  <style type="text/css">
   B:first-child {
    color: red; /* The red color of the text */
   }
  </style>
 </head>
 <body>
  <p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b> 
  adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt 
  ut lacreet dolore magna aliguam erat volutpat.</p>
  <p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b> 
  exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo 
  consequat</b>.</p>
 </body>
</html>

Here is the result of the example (fig. 16.2)


Fig. 16.2. The use of the first-child pseudo-class

In this example, the pseudo-class FIRST-CHILD is added to the selector B and sets the red text color for it. Though the container <B> is met in the first passage 3 times, in red it will be enlighten only the first mentioning, that is the text «Lorem ipsum». In other cases the content of the container <B> will be displaced in black color. With the next passage everything begins again, as the parental element was changed. That’s why the phrase «Ut wisis enim» also will be enlightened with red color.

Note

The browser Internet Explorer supports the pseudo-class FIRST-CHILD beginning from the version 7.0

Pseudo-class FIRST-CHILD is more convenient to use in cases, when it is necessary to set the different style for the first and other elements of the same type. For example, as for the rules of typography, the red line for the first passage is not set, and for the other passages the indent of the first line is added. With this aim the parameter TEXT-INDENT is applied with the needed meaning of the indent. But in order to change the style of the first passage and to remove the indent for it, it will be necessary to use the pseudo-class FIRST-CHILD (example 16.5).

Example 16.5. Indents for the passage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Pseudo-classes</title>
  <style type="text/css">
   P {
    text-indent: 1em; /* Indent of the first line */
   }
   P:first-child {
    text-indent: 0; /* The indent for the first line is removed*/
   }
  </style>
 </head>
 <body>
  <p> Everybody began forgetting this story, though there were some citizens from time to time were telling it to the incomers. </p>
  <p>the legend accumulated the details and haven’t resemble the event, that took part at all. But, though, nobody ventured to touch upon it with the dark.</p>
  <p> But one day the incomer came to the city. He was lame in the left leg.</p>
 </body>
</html>

The result of the example is shown below (fig. 16.3).


Fig. 16.3. The change of the first passage style

In this example the first passage of the text doesn’t contain the indent of the first line, but for the other passages it was set.