Css 3 selectors explained

In September and October of 2005 I published a series of articles that explained the selectors that are available in CSS 2.1. A quick summary is that most of the selectors described in those articles can be used now in modern browsers like Mozilla/Firefox, Safari, and Opera. We just need to wait for Internet Explorer to catch up before we can start using the full power of CSS 2.1 selectors. The good news is that Internet Explorer will catch up, at least to some extent, with the release of version 7.

If we look a little further ahead, there are even more powerful selectors waiting to be implemented and used in CSS 3. Many of the CSS 3 selectors have already been implemented in modern browsers, but in general support is far too patchy for developers to rely on these new selectors. However, there are cases where they can be used to add nice forward enhancing features, so I think taking a look at how the new selectors in CSS 3 work can be useful.

In this article, the specification I am referring to is the Selectors W3C Working Draft 15 December 2005 . The new selectors described in the document will be used by CSS level 3, but may also be used by other languages. If you are reading this article months, or even years after that date it may be worth checking if a more recent version is available.

I am not going to explain the basics of how CSS selectors in general work here. If you need a refresher, a good place to start is CSS 2.1 selectors, Part 1 .

First, a quick overview of the selectors that are new in CSS 3:

Overview of CSS 3 selector syntax
Selector type Pattern Description
Substring matching attribute selector E[att^=”val”] Matches any E element whose att attribute value begins with “val”.
Substring matching attribute selector E[att$=”val”] Matches any E element whose att attribute value ends with “val”.
Substring matching attribute selector E[att*=”val”]

Matches any E element whose att attribute value contains the substring “val”.
Structural pseudo-class E:root Matches the document’s root element. In HTML, the root element is always the HTML element.
Structural pseudo-class E:nth-child(n) Matches any E element that is the n-th child of its parent.
Structural pseudo-class E:nth-last-child(n) Matches any E element that is the n-th child of its parent, counting from the last child.
Structural pseudo-class E:nth-of-type(n) Matches any E element that is the n-th sibling of its type.
Structural pseudo-class E:nth-last-of-type(n) Matches any E element that is the n-th sibling of its type, counting from the last sibling.
Structural pseudo-class E:last-child Matches any E element that is the last child of its parent.
Structural pseudo-class E:first-of-type Matches any E element that is the first sibling of its type.
Structural pseudo-class E:last-of-type Matches any E element that is the last sibling of its type.
Structural pseudo-class E:only-child Matches any E element that is the only child of its parent.
Structural pseudo-class E:only-of-type Matches any E element that is the only sibling of its type.
Structural pseudo-class E:empty Matches any E element that has no children (including text nodes).
Target pseudo-class E:target Matches an E element that is the target of the referring URL.
UI element states pseudo-class E:enabled Matches any user interface element (form control) E that is enabled.
UI element states pseudo-class E:disabled Matches any user interface element (form control) E that is disabled.