Browser Support for CSS3 Selectors

Now that the numbers for IE6 and IE7 usage are diminishing rapidly, more and more development teams are starting to weed out support for those older browsers.

Most readers will probably have removed IE6 completely from the equation and soon IE7 will follow. Despite IE8 still having the highest share of any single browser version, the demise of IE6/7 now allows us to be more creative with CSS selectors.

This post will provide a comprehensive review of support for CSS3 selectors in the most troublesome browsers (guess which ones?). Each selector links to the appropriate location in the CSS3 spec.

Selectors Supported in IE7+

Here are the selectors you are limited to using if you support IE7:

Selector Name	Example
Universal Selector	`div *`
Descendant and Type Selectors	`div p` `article`
Class and ID Selectors	`.example` `#example`
Chained Classes	`.another.example`
Child Combinator	`div > p`
Adjacent Sibling Combinator	`div + p`
Attribute Selector	`a[href]`
Common Pseudo-classes	`a:link` `a:visited` `a:hover` `a:active`
:first-child Pseudo-class	`p:first-child`
:first-line / :first-letter Pseudo Elements	`p:first-line` `p:first-letter`
General Sibling Combinator	`h2 ~ p`
Value Attribute Selectors	`input[type="text"]` `p[class~="example"]` `a[hreflang\|="en"]`
Substring Attribute Selectors	`img[src^="images/"]` `a[href$=".pdf"]` `body[href*="home"]`

IMPORTANT NOTE: Although the above chart might imply that support for these selectors is flawless in IE7, this is simply not the case. There are many bugs associated with these selectors when used in IE7. You can read a description of most, if not all of them, in SitePoint's selectors reference.

Selectors Supported in IE8+

Unfortunately, IE8 doesn't seem to add much extra but it is much less buggy than IE7. Unless I'm mistaken or have omitted something, here are the selectors supported by IE8 and above:

Selector Name	Example
All the selectors listed in the previous section, but with fewer bugs	(See above)
:focus Pseudo-class	`a:focus`
:before/:after Pseudo-elements	`p:before` `p:after`
:lang Pseudo-class	:lang(fr) > blockquote

Selectors Supported in IE9 / IE10

IE9 adds many more of the new CSS3 selectors Selectors. Support in IE9 and IE10 seems to be identical, aside from maybe a few bugs and inconsistencies. Here’s the list of selectors supported in IE9 and the upcoming IE10, the latter of which is still not a stable release:

Selector Name	Example
All the selectors listed in the previous section, but with fewer bugs	(See above)
:empty Pseudo-class	`p:empty`
:enabled and :disabled Pseudo-classes	`input:enabled` `input:disabled`
:checked Pseudo-class	`input:enabled` `:checked`
:first-of-type Pseudo-class	`li:first-of-type`
:last-child Pseudo-class	`li:last-child`
:last-of-type Pseudo-class	`li:last-of-type`
:negation Pseudo-class	`input:not(type="submit")`
:nth-child Pseudo-class	`p:nth-child(2)`
:nth-last-child Pseudo-class	`p:nth-last-child(2n+1)`
:nth-last-of-type Pseudo-class	`dt:nth-last-of-type(2)`
:nth-of-type Pseudo-class	`img:nth-of-type(2n)`
:only-child Pseudo-class	`p:only-child`
:only-of-type Pseudo-class	`li:only-of-type`
:root Pseudo-class	`:root`
::selection Pseudo-element *	`p::selection`
:target Pseudo-class	`:target`
:indeterminate Pseudo-class	`:indeterminate`

The ::selection pseudo-element has good support in non-IE browsers but, for various reasons, has been removed from the spec.

What About Other Browsers?

As usual, any discussion of “browser support” might as well be called “IE support”, because all the in-use versions of the other browsers have good support for all of the above selectors, and with fewer bugs.

In addition to what’s shown above, there are a number of other CSS3 selectors that are supported by Chrome, Firefox, Safari, and Opera, but have no support in any versions of Internet Explorer. You can see some of these obscure selectors at this MSDN reference (see the “IE9” column where support is marked “No”) or by browsing the MDN CSS Reference. You can also see many of the non-IE selectors in the CSS3 User Interface Module on the W3C.

Don’t Forget Selectivizr

To add support for various CSS selectors not supported by IE7 and IE8, you can use the Selectivizr JavaScript utility, which adds support for “19 CSS3 pseudo-classes, 2 pseudo-elements and every attribute selector to older versions of IE”.

Conclusion

I haven’t tested all of these. I used a number of different references to compile and find support for what I’ve listed here, but something here could be incorrect. So use this as a guide but test thoroughly (does that even have to be said here?).

Please comment if you know of any major bugs, drawbacks, or corrections worth noting.