Home arrow Style Sheets arrow Learn CSS: Pseudo Classes

Learn CSS: Pseudo Classes

We met pseudo elements in the last article. In this article we will discuss pseudo classes, which give you the ability to apply certain styling rules on specific states of an element. In this part we discuss the following pseudo classes: :link, :visited, :hover, :active and :focus, :root, :first-child, and :last-child. Note that with CSS 3 there are many new pseudo classes. Not all of them are implemented, however, so I will discuss only the pseudo classes that have been implemented by the major browsers.

Author Info:
By: Michael Youssef
Rating: 4 stars4 stars4 stars4 stars4 stars / 38
July 11, 2005
  1. · Learn CSS: Pseudo Classes
  2. · The :link and :visited Pseudo Classes
  3. · The :hover Pseudo Class
  4. · The :active Pseudo Class
  5. · The :focus Pseudo Class

print this article

Learn CSS: Pseudo Classes
(Page 1 of 5 )

Pseudo elements offer us the ability to apply styling rules on parts of the markup document that can't be expressed with markup elements, such as the first line or even the first letter of a paragraph. We saw this in the previous article of this series, "Learn CSS, part 7: Pseudo Elements." Pseudo classes are very similar to pseudo elements, but pseudo classes apply the styling rules to the element depending on some state.

For example, there's a pseudo class called :hover which you can use to style an element (for example the <a> element) when the user hovers the mouse pointer over it. So in this example the style will be applied to the element if the state "hovering" occurs. The syntax for using pseudo classes is one colon (:) followed by the class name. In CSS 2 both pseudo elements and pseudo classes used the one colon syntax, but CSS 3 changed this behavior to differentiate between them.

There's another way we can explain pseudo classes. Of course you can set the styles of the document links through the use of one rule (like a {color: white; background-color: black;}). Now can you set the style of the links that have been visited? No, you can't do that because you don't have any way to know what links the user has visited and then apply styles to them. With CSS pseudo classes you can apply styling rules to visited links through a pseudo class (:visited). This means that you apply certain styling rules depending on the state of the element (a visited link). So let's discuss our pseudo classes.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2016 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials