Structural Pseudo-Classes

What’s a pseudo-class?

CSS pseudo-classes target elements that can’t be targeted with combinators or simple selectors like id or class. You use pseudo-classes to select elements based on their attributes, states, and relative position. For example, you are probably already familiar with pseudo-classes for link states:


CSS3 introduces a number of new pseudo-classes, including structural pseudo-classes that target elements according to their position in the document tree and relation to other elements. Here’s a list of the structural pseudo-classes


Pseudo-Class Syntax

The syntax for pseudo-classes uses a colon (:) followed by the pseudo-class name:

:pseudo-class {}

If you want to target a specific element (e), you append that element to the beginning of the pseudo-class syntax:

e:pseudo-class {}

You can even use pseudo-classes alongside id and class selectors, as you see here:

#id:pseudo-class {} .class:pseudo-class {}

Numeric Values

Some of the CSS3 pseudo-classes target elements on the basis of the elements’ specific location in the document tree. You indicate the position with a numeric value in parentheses (n) appended to the pseudo-class name:

:pseudo-class(n) {}

The value of (n) can be an integer to indicate an element’s position in the document tree. The following example targets the third element that meets the pseudo-class rule:

:pseudo-class(3) {}

You can also specify numeric formulas, such as “every fifth element,” which is indicated as a value of (5n):

:pseudo-class(5n) {}

Additionally, you can specify an offset formula (negative values allowed; default is zero) by adding (+) or subtracting (-) the offset value:

:pseudo-class(5n+1) {}

These new selectors also allow you to target elements by their document tree order with the keywords odd and even. For example, if you want to target the odd-numbered elements, use the following:

:pseudo-class(odd) {}

Browser Support

The good news is that all the latest browser versions, including Internet Explorer 10 and 9, support these CSS3 pseudo-classes. Some older browser versions may provide limited support for a few of the CSS3 selectors in this article.

When it comes to support in earlier version of Internet Explorer, it really should be about your project. How are you using any unsupported selectors? If it is purely for design and aesthetic purposes, ask yourself whether you can allow those Internet Explorer users to have a slightly degraded experience, while allowing Internet Explorer 9 and other browser users to have an enhanced experience. If the answer is yes, consider focusing on an adaptive approach to your CSS.

Pseudo class selectors can be invaluable tools, particularly for cases when you can’t rely on id and class selectors. Remember, writing good CSS is about finding the most efficient way to achieve a project’s goals. Here's a complete list of the CSS3 pseudo selectors: