A Guide to CSS2 and CSS3 Pseudo-classes and Pseudo-elements

While the term “pseudo-class” might not instantly evoke what it refers to, virtually every web developer and web designer has used them. The classic example of pseudo-classes involves styling links based on the state that they’re in (hover, active, etc.). CSS3 introduces over a dozen new CSS pseudo classes to give you more control over targeting and styling elements. CSS2 pseudo-classes still work in CSS3, and CSS2’s pseudo elements are virtually unchanged in CSS3 (see the last paragraph). Below is a chart that outlines pseudo-classes in CSS2 and CSS3 with new CSS3 pseudo-classes in bold.

Pseudo-class Description Notes/Example
:active Typically applied to links although it work with other elements. Applied when the user clicks on the selected element. a:active{}

p:active{}

:checked Applies to radio and checkbox form elements that are selected or checked. input:checked{}
:disabled Selects elements (usually input) that have the disabled attribute set to disabled (e.g. disabled=”disabled”). This is the opposite of :enabled. input:disabled{}
:empty Used to select elements with no children <p></p>
:enabled Selects elements (usually input) that are in an enabled state (the default). This is the opposite of :disabled. input:enabled{}
:first-child Selects the element that is the first child of another element. Equivalent to :nth-child(1). In a list, the :first-child selector placed on the the list item would select the first item in the list. div > p:first-child li:first-child
:first-of-type Selects an element that is the first sibling of its type in the list of children of its parent element. Equivalent to :nth-of-type(1). This differs from :first-child in that it can the item selected may not be the first child node. For example, consider a div that contained multiple paragraph and image tags. The :first-of-type applied to the img tag within the div would select the first image even though it may not be the first child within the div. dl dt:first-of-type div > img:first-of-type
:focus Usually applied to links and input elements. Applied when an element receives focus via the keyboard or mouse. input:focus{}

a:focus{}

:hover Typically applied to links although it works with other elements. Applied when the user hovers over the selected element. a:hover{}

p:hover{}

:indeterminate Applies to radio and checkbox form elements in an indeterminate or uncertain state. This state is usually set via JavaScript or an attribute in HTML5 (e.g. document.getElementsByTagName(“input”)[0].indeterminate = true;).
:lang Used to select elements with a lang attribute <span lang=”ja”>
:last-child Selects the element that is the last child of another element. Equivalent to :nth-last-child(1) li:last-child selects the last item in a list
:last-of-type Selects an element that is the last sibling of its type in the list of children of its parent element. Equivalent to :nth-last-of-type(1). This differs from :last-child in that it can the item selected may not be the last child node. For example, consider a div that contained multiple paragraph and image tags. The :last-of-type applied to the img tag within the div would select the last image even though it may not be the last child within the div. tr > td:last-of-type selects the last table cell in every row
:link Usually applied to um, links
:not() Special. Takes another CSS selector (e.g. :last-child) as an argument and selects the opposite group. For example, li:not(:last-child) would select all list items in a list except the last one. This selector can’t be used by itself, nested, or used with pseudo-elements (see below). li:not(:last-child) { font-style:italic; } selects all list item elements except the last one.
:nth-child() The W3C has a wonderful explanation for this Swiss army knife of a selector that’s about as clear as mud, but very useful. “The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element. For values of a and b greater than zero, this effectively divides the element’s children into groups of a elements (the last group taking the remainder), and selecting the bth element of each group”.
If you understood that after one read through you probably live in your parent’s basement.This selector is especially useful on tables and lists but it works virtually anywhere. In a nutshell it allows you to selectively pick elements based on their position. This differs from the :first and :last pseudo classes that target only the first or last occurrence of an element. Aside from using the an+b notation, it also accepts ‘odd’ and ‘even’ as arguments. For example, :nth-child(odd) is equivalent to  :nth-child(2n+1). Note that when using the  equation format that n starts at zero. The  arguments passed to this selector (if not using ‘odd’ or ‘even’) must be in the format: an+b where a and b are integers and n is a variable that starts at zero and goes as high as the total number of elements that match your selection. To select the even elements using an equation, use 2n+0. Going back to the argument equation an+b, if a is zero you can drop everything except for b. So instead of writing :nth-child(0n+3) you’d write :nth-child(3) which would select an element that is the third child of its parent. :nth-child(n+1) is equivalent to  :nth-child(n) and selects every element. Omitting b in the an+b equation selects every ath element. :nth-child(4n) selects every fourth element. Negative values are allowed and can be used to select the first X elements. For example, using :nth-child(-n+5) would select elements 5, 4, 3, 2, and 1.
:nth-child(10n+5) selects the 5th, 15th, 25th etc elements td:nth-child(3n)
{ background:gray; } selects the third table cell in every row
:nth-last-child() Similar to :nth-child(), this selector operates on the end of a group of elements. It follow the same an+b format and also accepts ‘odd’ and ‘even’. :nth-last-child starts at the end of a group of elements and works its way to the top. Where :nth-child(-n+3) would select the first three matching items, :nth-last-child(-n+3) would select the last three. :nth-last-child(-n+2) selects the last two elements
:nth-last-of-type() Another selector where the W3C lost touch with reality when describing it (“The :nth-of-type(an+b) pseudo-class notation represents an element that has an+b-1 siblings with the same expanded element name before it in the document tree, for any zero or positive integer value of n, and has a parent element.“). Basically this matches elements based on their type starting with the last elements and working up the list. Similar to :nth-last-child() except instead of selecting the nth child of a parent element you’re now selecting the nth child element of a specific type.
:nth-of-type Similar to :nth-child() selector however instead of selecting the nth child of some parent element you’re now selecting the nth child element of a specific type (e.g. image). For example, if you had a div that contained 10 paragraphs and 20 images you could use this selector to target just the images and then style specific images a certain way. img:nth-of-type(2n+1) { float: right; }
:only-child Selects elements that have a parent where the parent has no other children. Equivalent to :first-child:last-child or :nth-child(1):nth-last-child(1). Differs from :first-child in that :first-child applies to a parent element with multiple children where :only-child only applies to a parent with one child. li:only-child works on a list with only one item. if the list had more than one item nothing would be selected.
:only-of-type Selects elements that have a parent where the parent has no other children of the same type. Equivalent to :first-of-type:last-of-type or :nth-of-type(1):nth-last-of-type(1). p > img:only-of-type would select an image within a paragraph only if that paragraph contained no other images.
:root Selects the root element of the document. Typically <html>
:target Selects elements that are target. In your document you can reference the id of an element or named anchors (e.g. <a name=”foo”> or <p id=”foo”>). Then when you have a URL that references an id or named anchor (e.g. example.html#foo), the style will be applied. Without the #whatever applied to the URL, the styling won’t occur. See here for an example.
:visited Usually applied to links

Now while that table may seem a little intimidating, it really isn’t. In fact there are some cool uses for the new CSS3 selectors which we’ll go into in a future post. One last note, while some of you might be thinking that you can also use a JavaScript library, like jQuery, to accomplish some of the same results in terms of selecting specific elements, which is true, the best part is with some of these new selectors there’s no need to increase the loading time of your page by including a library when it can now be done with pure CSS.

Pseudo-elements

The list of pseudo-elements in CSS3 is the same as in CSS2 — no changes here. However the syntax has changed a little. By one extra colon to be exact. A pseudo-element is now composed of two colons (::) followed by the name of the pseudo-element instead of a single colon. The new :: notation is introduced to establish a discrimination between pseudo-classes and pseudo-elements. For backward compatibility, browsers must also accept the previous one-colon notation for pseudo-elements introduced in CSS 1 and 2 (e.g :first-line, :first-letter, :before and :after).

3 thoughts on “A Guide to CSS2 and CSS3 Pseudo-classes and Pseudo-elements”

    1. There’s no way to specify the version of CSS; browsers automatically either understand the rules or they don’t.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>