Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
CSS Pseudo-classes
In addition to named CSS classes, generic classes, and ID classes, there are also pseudo-classes. A pseudo-class allows you to define a change in the display for certain states of specific elements. If you rest your cursor on some links you will see a change of font color or some other visual change, that’s an example of a pseudo-class rule.
Pseudo-class rules are coded like a regular class rule, with the following two exceptions:
- They have predefined names; you can’t make up your own class name.
- Instead of separating the element and class name with a period, they are separated with a colon.
The four pseudo-classes below are ones you can create rules for to create a change of state for links:
a:visited
a:hover
a:active
In the preceding pseudo-classes, the letter “a” before the semicolon stands for anchor because some sailor made it up.
OK, not really, I made that up, but I used to be a sailor so it’s OK. The truth is that “a” is short for anchor because it represents the HTML anchor tag. An anchor tag is a link to another page on your website, to another website, to a file, or to a specific place within the current web page. In other words, it’s the HTML element for a link.
After each anchor pseudo-class you’d add the CSS property and value as you would with any other style declaration (rule). Here’s an example:
Simple! Just like with the other classes, we add a property and value to the selector and that is all that is needed. Here’s a brief description for those four pseudo-classes:
- a:link
- This sets the properties and values of a link before the link has been visited.
- a:visited
- This sets the properties and values of a link that the browser has already visited.
- a:hover
- This sets the properties and values of a link when the cursor is resting on it. This is commonly used to change the color of the link text.
- a:active
- This sets the properties and values of a link when it has been activated (clicked) until it is processed. With the advent of broadband Internet connections and faster servers and personal computers, many times this change of state isn’t even noticeable.
While most of the time webmasters just use the above pseudo-classes to change the colors of the link text for each state, other properties and values can be added or changed as well, such as; font weight, text decoration, font style, background color, borders and more.
When creating a style sheet using the “a” element pseudo-classes, they must be in this order:
a:visited
a:hover
a:active
If they are not in that order, things can break down and changes of state won’t work properly in some browsers.
Below is a list of all the CSS pseudo-classes:
If that list looks intimidating, relax. I SAID RELAX! You won’t use or even need to know most of them. You’ll find tutorials for the ones we feel are most useful in our Web Design tutorials list, and we may add tutorials for all of them over time.
