The Cross-Browser Compatibility Guide – CSS Selectors Browser Support
The Cross-Browser Compatibility Guide – CSS Selectors Browser Support
browseemall 
Welcome to the third part of the cross-browser compatibility guide. You can find the directory here.
CSS selectors browser support
In this post I would like to show which CSS selectors are supported in the different browsers.
CSS 2 Selectors
Today all current versions of major browsers support every CSS 2 Selector. But if you want to target older Browsers you may want to avoid some of those.
| Selector | IE 6 | IE 7 | IE 8 | IE 9 | Firefox | Chrome | Safari | Opera |
| E:active | Partly | Partly | Yes | Yes | Yes | Yes | Yes | Yes |
| E:hover | Partly | Partly | Yes | Yes | Yes | Yes | Yes | Yes |
| E:focus | No | No | Yes | Yes | Yes | Yes | Yes | Yes |
| E:before | No | No | Yes | Yes | Yes | Yes | Yes | Yes |
| E:after | No | No | Yes | Yes | Yes | Yes | Yes | Yes |
| * | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| .class | Partly | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| #id | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E F | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E > F | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E + F | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E[attr] | No | Partly | Yes | Yes | Yes | Yes | Yes | Yes |
| E[attr=val] | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E[attr~=val] | No | Partly | Yes | Yes | Yes | Yes | Yes | Yes |
| E[attr|=val] | No | Partly | Yes | Yes | Yes | Yes | Yes | Yes |
| :first-child | No | Partly | Yes | Yes | Yes | Yes | Yes | Yes |
| :lang() | No | No | Yes | Yes | Yes | Yes | Yes | Yes |
| :first-letter | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| :first-line | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
CSS 3 Selectors
With all the new shiny CSS 3 selectors available things tend to get tricky. Every modern browser supports all of them, but if you need to support older versions of Internet Explorer you are generally out of luck. And many Windows users cannot upgrade even if they would like to.
| Selector | IE 6 | IE 7 | IE 8 | IE 9 | Firefox | Chrome | Safari | Opera |
| E[attr^=val] | No | No | Yes | Yes | Yes | Yes | Yes | Yes |
| E[attr$=val] | No | No | Yes | Yes | Yes | Yes | Yes | Yes |
| E[attr*=val] | No | No | Yes | Yes | Yes | Yes | Yes | Yes |
| E ~ F | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| :root | No | No | No | Yes | Yes | Yes | Yes | Yes |
| :last-child | No | No | No | Yes | Yes | Yes | Yes | Yes |
| :only-child | No | No | No | Yes | Yes | Yes | Yes | Yes |
| :nth-child() | No | No | No | Yes | Yes | Yes | Yes | Yes |
| :nth-last-child() | No | No | No | Yes | Yes | Yes | Yes | Yes |
| :first-of-type | No | No | No | Yes | Yes | Yes | Yes | Yes |
| :last-of-type | No | No | No | Yes | Yes | Yes | Yes | Yes |
| :only-of-type | No | No | No | Yes | Yes | Yes | Yes | Yes |
| :nth-of-type() | No | No | No | Yes | Yes | Yes | Yes | Yes |
| :nth-last-of-type() | No | No | No | Yes | Yes | Yes | Yes | Yes |
| :empty | No | No | No | Yes | Yes | Yes | Yes | Yes |
| :not() | No | No | No | Yes | Yes | Yes | Yes | Yes |
| :target | No | No | No | Yes | Yes | Yes | Yes | Yes |
| :enabled | No | No | No | Yes | Yes | Yes | Yes | Yes |
| :disabled | No | No | No | Yes | Yes | Yes | Yes | Yes |
| :checked | No | No | No | Yes | Yes | Yes | Yes | Yes |
How to get CSS 3 Selector support in IE 6, 7 and 8
Want to use the new CSS 3 selectors but need to support older Internet Explorer versions? Try Selectivizr to emulate the new selectors in older browsers.
Photo by Steven Guzzardi
