CSS pseudo-classes and links
Pseudo-class
Pseudo-classes apply a style to elements according to their state, which can be changed by user actions, and may also depend on the location of the element in the document tree. Pseudo-class begin with a colon
and are usually added immediately after the selector type without additional spaces between them::
span:hover { color: red; }
Links
Most often, pseudo-class can be met when they are applied to links. Each link can be in one of four states: unvisited, visited, active (located under the mouse cursor) and pressed (held by mouse button). In CSS there is a possibility to stylize a links in each of its state:
a:link { color: #0000ff; }
a:visited { color: #ff00ff; }
a:hover { color: #00ccff; }
a:active { color: #ff0000; }
Try it »
The code above contains four CSS rules. Thus in each of selectors the pseudo-class is used. The first rule sets the color for links in which users have not yet passed, if the user clicked the link, the second rule will be used. Pseudo-classes :hover and :active dynamically change the display of a link: :hover stylized the link only when the mouse pointer is over it, and :active only when the user has already clicked on the link, but the button is still held.
Pseudo-classes :hover and :active are formally called dynamic because they only apply the style when the user interacting with the corresponding elements by hovering the mouse cursor and clicking the link respectively.
Note: :hover, in addition to links, can also be used with other elements, which allows you to create effects such as highlighting a row of a table when you hover the mouse over it. However, the IE6 browser and earlier versions support the use of this pseudo-class exclusively with elements <a>.
Underline links
By default, link text always appears underlined. Using the text-decoration property, you can either completely remove the underline of the links or make the link be underlined only when you hover the mouse over it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page title</title>
<style>
a { text-decoration: none; }
a:hover { text-decoration: underline; }
</style>
</head>
<body>
<p><b><a href="#">my link</a></b></p>
</body>
</html>
Try it »
Note: if you disable link underline by using the text-decoration property, the only visual difference between the links and plain text will be their color. This can cause users to find it difficult to distinguish between link from text.
Pseudo-classes :first-child and :last-child
One more example of pseudo-classes are :first-child and :last-child. Pseudo-class :first-child refers to the first child element of the specified parent, unlike it :last-child works on the contrary, it refers to the last child element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page title</title>
<style>
div p:first-child { color: green; }
div p:last-child { color: blue; }
</style>
</head>
<body>
<div>
<p>The first child paragraph of the div element, it will be displayed in green.</p>
<p>The second child paragraph of the div element, it will be displayed in
black, because there are no rules for it.</p>
<p>The third child paragraph of the div element, it is also the last child paragraph.
The text color will be blue.</p>
</div>
</body>
</html>
Try it »
Because the first paragraph is the first child element of <div>, its text will be displayed in green. The text color of the second paragraph will match the default color, which is black. The text color of the third paragraph will be colored blue because the third paragraph is the last child of the <div>.