CSS Pseudo-class

You may not know it, but a link has four different states that it can be in.To customize each state, CSS is used. Please refer to the following keywords that each correspond to one specific state:

link - this is a link that has not been used, nor is a mouse pointer hovering over it
visited - this is a link that has been used before, but has no mouse on it
hover - this is a link currently has a mouse pointer hovering over it/on it
active - this is a link that is in the process of being clicked

You can make a different look for each one of these states using CSS, but at the end of this lesson we will suggest a good practice for CSS Links.

CSS Pseudo-Classes

what you've seen is a little different than the format for CSS Links . You have to use the following CSS code formatting to modify these 4 states

CSS Code

a:(STATE'S NAME) { attribute: value; }

How the HTML element should appear, depending on which state it is in ,the state's name which is called the "pseudo class" is uesd. Below is an example of changing the "link", "visited", and "hover" state. Note to make a functioning CSS link,the order that they are defined, it is the proper ordering.

CSS Code

a:link { color: red; }
a:visited { color: red; }
a:hover { color: blue; }

CSS Code

<a href="">This is a special CSS Link</a>!

The states must be defined in the correct order. Here is the order, starting with the one you must define first:

link

visited

hover

active

Removing the Default Underline

Throughout academic-tutorial.com you probably have noticed the different styles that we have for certain links. Unless you are hovering, our menu's do not have an underline while the links in our main content do have underlines. Use text-decoration: none to remove the underline from certain states of a hyperlink,.:

CSS Code

a:link { color: red; text-decoration: none; }
a:visited { color: red; text-decoration: none; }
a:hover { color: blue; }

One Sample Example

To manipulate the states of a hyperlink,below sample example that use many forms of CSS

CSS Code

a:link {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;
}

a:visited {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;
}

a:hover {
color: black;
background-color: white;
text-decoration: none;
border: 2px solid black;
}

The follwing table describe the Pseudo-class and its Purpose:

Pseudo-class	Purpose
:active	Adds special style to an activated element
:focus	Adds special style to an element while the element has focus
:hover	Adds special style to an element when you mouse over
:link	Adds special style to an unvisited link
:visited	Adds special style to a visited link
:first-child	Adds special style to an element that is the first child of some other element
:lang	Allows the author to specify a language to use in a specified element