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.

CSS 1 ↓ 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 CSS 2.1 ↓ 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 CSS 3 ↓ 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

1. :hover only works for a-elements in IE6.
2. E:empty seems to have some buggy behaviour in webkit-based browsers.
3. Not sure how to test if this is still buggy.
4. Tim has informed that the :before and :after selectors 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.
5. 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 :checked test. Seems as if Firefox does support the selector, it just doesn't support red borders on checkboxes... 2007.03.16: Added :checked test 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-child test 2007.01.04: Improved the examples for :min-width and :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...