The Mysterious Pseudo Class in CSS

The pseudo class is a way for you to select elements in various states. You may be familiar with this in the form of links, when you can set a set of styles for when someone hovers over a link like so:

a:hover {
     color: #e3e3e3;
}

This serves two purposes: It lets your users know that they can click on this as it has reacted to their hover (Usability) and it makes your links prettier (Aesthetics).

Of course, the pseudo class doesn’t stop at links, and you can use :hover with any other html tag. For instance, you could use it with an input to let users know that they can interact with it:

input:hover {
     border: 3px solid #eee;
}

The above just adds a nice gray border around an input when a user hovers over it. That’s just a basic example, of course. We’ll get to more complicated stuff later.

Syntax

As you would imagine, all pseudo classes in CSS follow this syntax:

element:pseudo {

}

Where element is whatever you’re targeting, and pseudo is the pseudo class you’re applying. Some pseudo classes use brackets as well. For instance, the pseudo class :not() decides what not to apply CSS to. This is useful when you want to apply somethign to everything except maybe a certain class. Example:

.class:not(div) {

}

Which will apply to all .class elements assuming they aren’t divs.

Browser Compatibility

Ah the joys of being a web developer. As usual, pseudo classes aren’t going to work in all browsers, so watch out. Where it says No the feature isn’t currently supported in any released stable version of the engine, or it is supported incorrectly. For instance, although IE does support the :active pseudo class, its implementation of it is incorrect. Also note that IE6 supports :hover, however it only supports it for anchors.

The number is the version it’s supported from (in green, of course). Last updated on January 21st 2010.

Using the Pseudo Class

Most of the pseudo class elements are pretty straight forward and do exactly what they say they do. Pseudo classes target elements in different situations and states. Some of them are a little trickier, so in the table below is a list of the pseudo elements and their intended usage.

The Many Benefits

Usability

Usability can make or break a website. After all, you want your users to be able to use your website in an easy way, don’t you? Pseudo classes can come in handy when trying to increase usability. Hover effects can make things react to a users hover, letting them know they can do things with it.

Breakdown of CSS

The above is a pretty basic example of what pseudo classes can do for you, and show how they can make things a heck of a lot easier to use. The CSS looks something like this:

#s {
	border: 3px solid #c5c5c5;
	color: #5e5e5e;
	font-size: 16px;
	font-family: Tahoma, sans-serif;
	padding: 15px;
	width: 240px;
	margin: 0px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
}

#s:hover {
	border: 3px solid #a1a1a1;
}

#s:focus {
	border: 3px solid #8d3737;
	outline: none;
	background: url('images/search.gif') repeat-x;
}

This allows users to see that they can interact with the search box. Of course, not all browsers support :focus or even :hover properly, which leads us onto our next point.

Graceful Degradation

Graceful Degradation is when a browser doesn’t support a pseudo class (or any CSS for that matter), it’ll fall back on something else. For instance, the fact that older browser don’t support rounded corners doesn’t mean you can’t implement it. It just means users wont see the rounded corners in those older browsers. It won’t affect your users in any site-crippling way.

The same goes for pseudo classes. If you’re using an older browser which doesn’t support :focus and the user clicks on an input with a focus CSS class, it just means those users wont get the focus effect. It doesn’t alter the usability of the input field.  This means you can implement most pseudo classes on a basic level (as long as they’re not being implemented in a way that’ll effect the layout of a website) without worrying about altering user experience in older browsers.

Aesthetics

Pseudo classes give you the opportunity to make everything on your website look prettier. Websites are no longer two dimensional, and most websites implement hover effects and things like that to let users know they can interact with it. It’s no longer just about the static design you have in Photoshop, but also about how everything is going to mesh together and react to a user.

Not only that but things that were once hard will be simplified by pseudo classes, such as having the last div be a footer with :last-of-type, or having custom CSS when something is :empty.

Where do I go from here?

• Code a Layout in HTML5
• How to Handle IE6: Aggressive Graceful Degradation
• CSS3 Pseudo in IE5-8
• 8 Awesome Things CSS3 Will Do