CSS3 Pseudo-Classes

CSS3 Basics - Part 19

Forward: In this part of the series, we look at Pseudo-Classes in CSS.

By: Chrysanthus Date Published: 23 Jul 2012

Introduction

This is part 19 of my series, CSS3 Basics. A class of elements is a collection or set of elements. A Pseudo-Class is a class of elements that are in the CSS language and not in the HTML language. In this part of the series, we look at Pseudo-Classes in CSS.

The Link Pseudo-Classes
The link pseudo-classes apply to the A elements. When a user is using a web page, there are some A elements that he would click, and there are others that he would not click. During the session, he might want to know the A elements that he has clicked and those that he has not clicked. There are two link pseudo classes to make this distinction. These are the “:link” and “:visited” classes. The A links that have not been visited (clicked) are of the “:link” class. Those that have been visited are of the “:visited” class.

Implementing the Link Pseudo-Classes
You implement the two Link Pseudo classes as follows:

        a:link {color: red}
        a:visited {color: purple}

You start with the tag name of the A element, a, followed by either the “:link” or “:visited” class. For this case, the links that have not been visited have the red color, while those that have been visited have the purple color. You can give whatever presentation you want in any of the declaration blocks.

The dynamic pseudo-classes
The dynamic pseudo-classes apply to any set of elements. There are three dynamic pseudo-classes: the “:hover”, “:active”, and “:focus” class.  Each class can apply to all HTML buttons, or all A links that have not been visited, or all A links that have been visited or all images, etc.

The :hover Class
Assume you have a web page that has buttons, and all the buttons are of the hover class. As the user is viewing the web page, if the mouse pointer goes over a button, that button will have a special presentation. When the mouse pointer is out of the button the button looses that presentation. The special presentation is what is in the declaration block of the hover class. The following code illustrates this. Try the code and move the mouse pointer over each button in turn.

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        button:hover {background-color:lightblue}
    </style>
</head>
<body>
    <button type="button">Click Here 1</button><br />
    <button type="button">Click Here 2</button><br />
    <button type="button">Click Here 3</button><br />
</body>
</html>

If you tried the code, you would have noticed that when the mouse pointer is over a button, the background color of the button is light-blue. The CSS rule for this is:

        button:hover {background-color:lightblue}

The :hover class becomes effective, if you attached its name to the tag name of an HTML element, as for the button elements above. The content of the declaration block gives you the special presentation.

The :active Class
This is applicable to any set of elements. Assume that you are viewing a web page and you click an A link for another page to appear. It would take some time before the other page appears. While you are waiting for the new page, the A link is said to be active. After this, when you are seeing the new page, the A link would be in its visited phase, no longer in the active phase. You implement the pseudo active class as the following line illustrates:

        a:active {background-color:green}

The :active class becomes effective, if you attached its name to the name of an HTML element as in the A element above. The content of the declaration block gives you the special presentation.

The :focus Class
Each browser has its way of indicating to the user the element that has focus. If you are viewing a web page and you press the tab key on the keyboard repeatedly, slowly, the browser will be moving the focus from one element to the other, indicating to you the element that has focus by a slight modification of its normal presentation. Usually this modification of presentation is not conspicuous. If you want the indication to be conspicuous, you have to use the :focus pseudo class, as the following line illustrates.

        button:focus {background-color:lightgray}

The :focus class like all the other classes becomes effective, if you attached its name to the tag name of an HTML element as in the button element above. The content of the declaration block gives you the special presentation.

The a Link Element
Many web pages use the :link, :visited, :hover and :active pseudo classes for the a link element. You need something like this:

a:link    {color:red; text-decoration: none}    /* unvisited links */
a:visited {color:blue; text-decoration: underline}   /* visited links   */
a:hover   {color:yellow; text-decoration: underline} /* user hovers     */
a:active  {color:lime; text-decoration: underline}   /* active links    */

The classes must appear in the above order; that is, the :link first, then :visited, then :hover and finally :active.

Conclusion
A class is a set of items. A Pseudo class exists in the CSS language and not in the HTML language. A Pseudo class gives a special presentation to a set of HTML elements or a set of HTML elements in a particular situation. Link elements that have been visited are in a particular situation.

Chrys

Broad Network

CSS3 Pseudo-Classes

CSS3 Basics - Part 19

Introduction

Related Links

Comments