Learn CSS: Pseudo Classes
(Page 1 of 5 )
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.
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.
Next: The :link and :visited Pseudo Classes >>
More Style Sheets Articles
More By Michael Youssef
