CSS3 pseudo-classes

DZone 's Guide to

CSS3 pseudo-classes

· Web Dev Zone ·
Free Resource

Pseudo-classes are a very successful concept contained in CSS 1 and 2 specifications, although very limited in their initial introduction. Pseudo-classes are CSS selectors (the part that stays out of {} and that is used to match particular HTML elements), which are different from normal classes in their generation process. Instead of specifying a class attribute on the elements you want to style and match them with a .classname selector, you can use standard pseudo-class selectors that start with : and that the browser will match with elements that satisfy particular conditions.


An example of pseudo-class from CSS 2 is one of the most successful use of CSS for user interaction, the :hover pseudo-class. This pseudo-class is automatically activated whenever the mouse is over the selector element, thus giving the web designer the ability to specify CSS rules to be applied in response to a particular event. For instance, you can easily switch from underlined to plain text when a link is under the mouse pointer:

a:hover { text-decoration: none; }

These rules can be contrasted with a complementar definition without :hover (a:hover for example becomes simply a), with opposite rules to apply when the mouse is not on the element anymore. With this couple of selectors, the onmouseover and onmouseout events are no longer necessary to apply graphic rules, though they are still useful when there is more computation to perform in response to the user passing over a link, like an Ajax request.

In the web design field, :hover is widely used to create dynamic designs in pure CSS, when rollover on the single element is necessary, for example changing background, borders or font weight of menu items when they are under the pointer, or even displaying submenus. Here's a live example.

The real power of pseudo-classes

The idea behind pseudo-classes is transforming behavior definition from programmatical (JavaScript functions associated to events) to declarative (CSS rules), which is the same thing JavaScript libraries are trying to do today. For example, the Dojo Toolkit examines the dojoType attribute of elements to transform HTML inputs and divs in JavaScript widgets, without a developer having to write routines to initialize them.

Declarative programming interfaces are generally less powerful than imperative ones, but they are less prone to bugs because of their limited size. Standard behavior like a mouse over or mouse out event is implemented consistently by browsers once and for all, instead of being repeated in every different page in several JavaScript dialects.

Declarative approaches like pseudo-classes have also a smaller footprint since they are implemented in C (the browser's programming language) instead of JavaScript in the page-space. Menu and navigations bar realized with :hover are also crawlable by search engines and screen readers, giving a boost to accessibility.

CSS3 new pseudo-classes

The CSS3 specification introduces more pseudo-classes to use as selectors. I will present here the most important, that can alleviate the pain of many web developers when it comes to enrich the user experience with the limited tools of a browser interface and without introducing JavaScript libraries that have a great impact on load time.

:n-th child has the capability to match a particular child of an element by a cardinal number. Nothing extraordinary, but the number can be expressed with a linear polynomial in n (an+b). The numbers resulted from the substitution of natural numbers into n will be matched by the selector.
For example you can easily match the third paragraph of a div:

div p:nth-child(3) {}

But also odd-numbered rows of a table (much more useful):

tr:nth-child(2n+1) {}

Or one out of three rows:

tr:nth-child(3n) {}

:empty will match empty elements. It is useful for example to collapse the margin of empty paragraphs, or filling cell tables with a particular background when they do not contain anything:

td:empty { background-color: grey; }

:target is one of the most web2.0-esque selectors of CSS3. Right now url fragments (the part of the url that ends in #) are used to maintain traces of AJAX navigation. CSS3 extend this concept with :target. The rules inside the :target pseudoclass will be applied to the element with id equal to the current url fragment.

You can see the potential here: links that change the fragment (like <a href="#mysubpage">) can be used to dynamically apply rules, for example on visibility, to part of the page (a <div id="mysubpage" class="box">) which are normally not displayed. The result is a single-page navigation (a la Gmail) without JavaScript involved, as long as the data to shuffle are all on the same page:

.box {
display: none;
:target {
display: block;

Finally, :not simply negates the contained selector, so that the specified rules will apply to all the elements that do not match it. In CSS2 the only way to apply a rule to every element but a particular one was a combination of the * universal selector followed by overriding for that specific element.

All that glitters is not gold

CSS3 support is under implementation by the most popular browsers, and the black sheep here is Internet Explorer, which even in its 8.x version totally ignores the pseudo-classes that other browsers such as Firefox and Safari came to support. Opera and Chrome adhere very well to the standard (although it is not a standard , yet.)

A long time will pass before web developers can use CSS3 (and its new pseudo-classes) in a cross-browser way, and in production code. Though, it's important to be aware of the innovations so that when they will become generally available we will be ready to leverage them. Hopefully, CSS3 and HTML5 will finally bridge the gap between web and desktop applications in the next years.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}