Using CSS Pseudo-Class

Introduction

In this article, you will learn how to use a CSS Pseudo-class with Text-decoration on Navigation Bars. CSS Pseudo-classes are used to add special effects to some selectors.

Anchor Pseudo-Classes list

Parameter	Description
a:link{ }	Unvisited link.
a:hover{ }	Mouse over link.
a:visited{ }	Visited link
a:active{ }	Selective link

Without the use of a pseudo-class

simple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>Anchor</title>  
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
    <link href="Untitled_1.css" rel="stylesheet" type="text/css" />  
</head>  
<body>  
    <div id="top_nav">  
        <ul>  
            <li><a href="file://MCNSERVER2/UserProfiles/vchoudhary/Desktop/exsercise9/default.html">HOME</a></li>  
            <li><a href="file://MCNSERVER2/UserProfiles/vchoudhary/Desktop/exsercise9/default.html">NEWS</a></li>  
            <li><a href="file://MCNSERVER2/UserProfiles/vchoudhary/Desktop/exsercise9/default.html">ARTICLE</a></li>  
            <li><a href="file://MCNSERVER2/UserProfiles/vchoudhary/Desktop/exsercise9/default.html">BLOGS</a></li>  
            <li><a href="file://MCNSERVER2/UserProfiles/vchoudhary/Desktop/exsercise9/default.html">ABOUT</a></li>  
        </ul>  
    </div>  
</body>  
</html>

CSS code

#top_nav {  
    min-width: 600px;  
    height: 40px;  
    background-color: lime;  
    padding: 15px 5px 5px 25px;  
}  
#top_nav ul li {  
    display: inline;  
}

Using a Pseudo-Class

The color of the text changes when you hover the mouse over the link.
```
a:hover {    
    color: gray;    
}
```

The color of the text background changes when you hover the mouse over the link.
```
a:hover {  
    color: gray;  
    background-color: maroon;  
}  
```

Pseudo-class with Text-decoration. The text becomes underlined when you hover the mouse over the link.

a:link {        
    text-decoration: none;  
}  
a:hover {  
    text-decoration: underline;  
    color: gray;  
}

Complete CSS code

/* CSS layout */  
#top_nav {  
    min-width: 600px;  
    height: 40px;  
    background-color: lime;  
    padding: 15px 5px 5px 25px;  
}  
#top_nav ul li {  
    display: inline;  
}  
/* Pseudo-Class */  
a:link {  
    text-decoration: none;  
}  
a:hover {  
    text-decoration: underline;  
    color: gray;  
}

Without use of the :focus Pseudo-class

HTML code

<!-- HTML code -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>Focus</title>  
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
    <link href="Untitled_1.css" rel="stylesheet" type="text/css" />  
</head>  
<body>  
    <div id="page_content">  
        <form name="firs_last">  
            FIRST NAME: <input type="text" name="fname" size="15" /><br/><br/>  
            LAST NAME: <input type="text" name="lname" size="15" /><br/><br/>  
            <input type="submit" value="submit"/>  
        </form>  
    </div>  
</body>  
</html>

CSS Code

#page_content {  
    min-width: 600px;  
    height: 500px;  
}

pfocus

Using the: focus Pseudo-class

CSS Code

#page_content {  
    min-width: 600px;  
    height: 500px;  
}  
#page_content input:focus {  
    background-color: orange;  
}

pwfocus