CSS selectors and pseudo selectors browser compatibility
This page has not been updated for some time and some of the browser versions are obsolete - I'm working on a better format for the page, so check back every now and then :)
The following is a range of CSS tests of the most common browsers' support for selectors and pseudo selectors. The tests includes basic stuff from the good old days of CSS1 and funky stuff from the future (CSS3). If you feel like reading more about the selectors and which attributes they support, the W3C is the place to go!
If you spot any errors (it happens to us all...) or have any comments, I'm on Twitter as @overflowhidden.
Click here to see this page's history.
| ↓ Selector / Browser → | IE6 | IE7 | IE8 | IE9 preview | FF 3 | FF 3.5 | FF 3.6 | Safari 3 | Safari 4 | Chrome 5 beta | Opera | Opera 10.5 beta |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ↑ Selector / Browser → | IE6 | IE7 | IE8 | IE9 preview | FF 3 | FF 3.5 | FF 3.6 | Safari 3 | Safari 4 | Chrome 5 beta | Opera | Opera 10.5 beta |
| E | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E F | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| :link | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:active | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:visited | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:first-line | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:first-letter | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E.classname | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E#id | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| .classname.classname | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| ↓ Selector / Browser → | IE6 | IE7 | IE8 | IE9 preview | FF 3 | FF 3.5 | FF 3.6 | Safari 3 | Safari 4 | Chrome 5 beta | Opera | Opera 10.5 beta |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ↑ Selector / Browser → | IE6 | IE7 | IE8 | IE9 preview | FF 3 | FF 3.5 | FF 3.6 | Safari 3 | Safari 4 | Chrome 5 beta | Opera | Opera 10.5 beta |
| * | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E > F | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:first-child | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:hover | Partial (1) | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:focus | No | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E + F | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Buggy (5) | Yes | Yes |
| E[attr] | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E[attr="name"] | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E[attr~="name"] | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:before | No | No | Yes | Yes | Buggy (4) | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:after | No | No | Yes | Yes | Buggy (4) | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| ↓ Selector / Browser → | IE6 | IE7 | IE8 | IE9 preview | FF 3 | FF 3.5 | FF 3.6 | Safari 3 | Safari 4 | Chrome 5 beta | Opera | Opera 10.5 beta |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ↑ Selector / Browser → | IE6 | IE7 | IE8 | IE9 preview | FF 3 | FF 3.5 | FF 3.6 | Safari 3 | Safari 4 | Chrome 5 beta | Opera | Opera 10.5 beta |
| E ~ F | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E[attr^="name"] | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E[attr$="name"] | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E[attr*="name"] | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E[attr|="name"] | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:root | No | No | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:nth-of-type | No | No | No | Yes | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:nth-last-of-type | No | No | No | Yes | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:first-of-type | No | No | No | Yes | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:last-of-type | No | No | No | Yes | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:only-of-type | No | No | No | Yes | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:only-child | No | No | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:last-child | No | No | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:nth-child | No | No | No | Yes | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:nth-last-child | No | No | No | Yes | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:empty | No | No | No | Yes | Yes | Yes | Yes | Buggy (2) | Yes (3) | Yes | Yes | Yes |
| E:target | No | No | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:checked | No | No | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E::selection | No | No | No | Yes | No | No | No | Yes | Yes | Yes | Yes | Yes |
| E:enabled | No | No | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:disabled | No | No | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E:not(s) | No | No | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
:hoveronly works fora-elements in IE6.E:emptyseems to have some buggy behaviour in webkit-based browsers.- Not sure how to test if this is still buggy.
- Tim has informed that the
:beforeand:afterselectors are buggy in Firefox versions before 3.5. Apparently they do not allow inserted elements to have fixed width/height or absolute positioning. I haven't checked this out myself. Thanx, Tim! Update: It certainly seems as if Tim is right - in Nicolas Gallaghers great demo about multiple backgrounds using CSS2.1, he also points this out. - It seems that Chrome (at least on a Mac) has some issues with the adjacent selectors - I've created a test page to demonstrate it. It does not seem to be a Webkit issue, as Safari has no issues with this.
- History (not complete):
- 2011.04.13: I've discovered a bug in Google Chrome regarding the adjacent selectors and created a test page to demonstrate the problem. The bug is fixed in v11 of Chrome.
- 2010.03.18: Opera 10b3 replaced with Opera 10.5 beta. Chrome 2 replaced with Chrome 5 beta. Firefox 2 replaced with Firefox 3.6. Internet Explorer 9 developer preview added.
- 2009.08.19: Konqueror removed as I have no way of testing it. Opera 10 beta added. Test for :not added.
- 2009.08.05: Firefox 3.5 beta 4 replaced with the final version. Chrome 1 replaced with Chrome 5 beta. Also changed lightbox functionality.
- 2009.06.15: Firefox 3.5 beta 4 added to the matrix
- 2009.06.11: Safari 4 beta replaced with the final version
- 2009.03.17: Safari 4 beta added
- 2009.03.04: Completely redone! New matrix overview, more selectors, better tests, more browsers. Removed min-width and max-width as they are not selectors.
- 2008.10.31: Internet Explorer 8 beta 2 added - major improvements compared to IE7!
- 2008.09.11: Google Chrome added
- 2008.06.27: Removed Firefox1.5 and inserted Firefox 3 instead. Also updated all the Safari tests to Safari3.
- 2007.07.13: Corrected the
:checkedtest. Seems as if Firefox does support the selector, it just doesn't support red borders on checkboxes... - 2007.03.16: Added
:checkedtest - 2007.01.12: I have added Konqueror 3.5.5 - which aces all the tests!
- 2007.01.09: I have added Firefox 2.0.0.1
- 2007.01.04: Added
:nth-childtest - 2007.01.04: Improved the examples for
:min-widthand:max-width. - 2007.01.02: I have added Opera 9.10 and there are some stats at the bottom of the page now...
- 2006: Created...