Pseudo-Classes

May 30, 2013

Pseudo-classes allow you to do more with less code. Since pseudo-classes add no markup, they look “invisible” to the user because everything is done through CSS. You’re basically gaining one or more “free” elements that you would otherwise have to write markup for.

This definition gives you a good idea of what these selectors do:

The prefix pseudo (from the Greek word pseudes, meaning “lying” or “false”) is used to mark something as false, fraudulent, or pretending to be something it is not.

:before and :after

These pseudo-classes are used to insert text, character codes or images before or after elements. The syntax for pseudo-classes is quite simple:

Pretty neat, right? You’ll have more control over your markup by combining pseudo-classes with CSS classes.

You can use :before and :after in new and creative ways. For example, I often use :before on lists or elements that need character codes or icons. Let’s try adding a red star before each item in a list:

.exampleli:before{content:"★";color:#d31742;padding-right:0.5em;}

But :before and :after are not the only pseudo-classes. There are many more:

:visited

:hover

:focus

:first-letter

You can’t use :before and :after without a content property. You can, however, leave the content property blank if you don’t want to add extra content.

Content Property

Let’s look at another example from my timeline project. I used the required content property, but left it blank to achieve the timeline’s gray line. Now I won’t have to write extra markup to get the same result.

Clearfix

Nicolas Gallagher’s popular clearfix uses pseudo-class selectors to clear floats. This eliminates the need to hide generated content and reduces the amount of code you need to write. I always add this clearfix to my container classes to keep floats cleared properly.

I let the CSS do all the work; no extra markup needed! The browser will re-evaluate the styles even if I add more columns later.

The ability to add extra design elements without additional markup or classes is extremely powerful. I use these pseudo-classes every day. As designers and developers we should try to use as little markup as possible.