CodeinWP CodeinWP

Browser Support for CSS3 Selectors

Browser Support for CSS3 SelectorsNow 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

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.

7 Responses

  1. Odt Ukoge says:

    If you use Selectivizr with the NWMatcher selector engine IE 6-8 support all the new selectors. I’ve used it for a few months now and it works great.

  2. guiwidgets says:

    Useful one, the way you organized it. Thanks for sharing it. :)

  3. Udit Goenka says:

    Daang !! What an awesome resource. I have been using Selectivizr javascript and it has proven to be awesome so far. Bookmarked this one :)

  4. Good overview! One might also add that IE9+ has added support for the CSS3 pseudoelements with double colons (::before and ::after).

  5. Finn says:

    Thanks for this very useful list!

  6. Arvind says:

    Very useful one, and i really like the way you organized it.

    Thanks for sharing it. :)

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).