First time visitor? The tutorials start here.

CSS Pseudo-classes

Pseudo-classes give you more control over the visual presentation of your pages without needing to add extra markup (xHTML) to the page itself, and in many cases it allows you to do things that wouldn’t be possible at all without pseudo-classes. Internet Explorer doesn’t recognize the first-child pseudo-class, but does recognize the following four when used on anchor-links:

  • :link
  • :visited
  • :hover
  • :active

Since these are used in most websites, I will start with them, after which the rest should be easier to understand.

As I mentioned above, the four pseudo-classes for links are:

  • :link
  • :visited
  • :hover
  • :active

They should be listed in this order within your style sheet, otherwise you won’t get the desired effect. That is, unless you would rather have active links obey the :hover rules if someone is still hovering on the link between the time it’s clicked on and the next page starts to load, or unless you prefer visited links to keep the same properties regardless of whether they’re being hovered on or not, etc.

  • a:link defines the properties of a link that has not been visited yet.
  • a:visited defines a properties of a link that the user has visited. If you make this different than a:link, such as using a different color for the text, it can help people remember where they have been so they don’t keep going around in circles trying to find their way around your site.
  • a:hover defines the properties of a link when the user has their cursor over it. In addition to underlining links to distinguish them from plain text, this can help further the point that, yes, there is something special about this text and it actually does something, inviting them to click on it.
  • a:active works a bit differently from browser to browser. In IE, it will keep the :active properties between the time you click on the link and the next page starts loading. In other browsers, it will keep the :active properties for as long as you hold down the mouse button, then change to the :hover state after letting up on the button, then go to the non-visited state if you hadn’t visited that link before, if you are still on that page while doing so and before the next page starts loading.

If that last part sounded confusing, just try it out on Firefox to see what I mean, but it really isn’t that important in the larger scheme of things. 😉

Defining specific links

a:link, a:visited, a:hover, and a:active, when used alone, will define all of the links on a page. However, what if you have a black sidebar with light text and a white content area with dark text? It would be difficult to read dark links on a dark back ground or light links on a light background, so you would want to define links in the different sections differently.

Let’s say you gave your sidebar the id of “sidebar,” like so:

<div id="sidebar">Sidebar content here</div>

If you want to make all of the non-visited links in your sidebar white, this is how the CSS for that would look:

#sidebar a:link { color: #fff; }

Likewise, if you want links within a special class to be styled differently, you would use the .class syntax instead of #sidebar.

You may give a class name to a link, like this:

<a class="myclassname" href="http://sample.com">Some text here</a>

Many people misuse this and clutter their markup (xHTML or HTML) by adding the same class name to several different links, when they could simply surround all of those links within one class and then style them as I demonstrated above. However, if you want a specific link here and there to have its own styling, without styling all links in that area the same way, this is a valid way to do it, and the way to style those links would be like this:

a.myclassname:link { CSS definitions here }

Obviously, you would substitute “CSS definitions here” with the actual attribute name: value; (aka property: attribute;) combinations.

As an aside, you can use :hover on elements other than links and it will work in many browsers (for example, if you want paragraphs to have a different background color when they’re hovered on), but Internet Explorer still doesn’t support this as of the date on this post (wake up, Microsoft!). If all browsers would support it, I could have easily created this photo gallery without anchor links, which would have made sense since the links don’t actually “go” anywhere and were only used to get the desired “enlarging” effect when they’re hovered on.

:first-child

Let’s say you have this in your xHTML:

<div id="content">
<p>A paragraph here.</p>
<p>Another paragraph here.</p>
</div>

And you style it like this:

#content p:first-child { text-indent: 2em; }

This would indent the first line of the first paragraph with the #content div, but won’t effect any of the other paragraphs on the page.

Internet Explorer first began supporting :first-child as of version 7, and most other browsers began supporting it long before then.

Soon, I’ll tell you about pseudo-elements, which are very similar to pseudo-classes.

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.