CSS selectors: basic browser support

These charts compare basic support for the various selectors, pseudo-classes and pseudo-elements defined in the CSS Selectors module. When a selector is flagged as supported, this only means: the UA reacts to the selector in a way that is compatible with the specifications (rephrased: take these results with the proverbial grain of salt). I've followed the selector notation and grouping used by the W3C document.

The links in the first column (selectors) point to simple test cases in this section (when available). The links in the version column point to the first occurence of the selector in the specifications: CSS1, CSS 2.1 (CSS 2.0 selectors is not much different) and the already mentioned CSS 3. Test-suites used to compile these tables: the CSS 2.1 test suite, the CSS 3 selectors test suite (and see R. Blaut’s table), my own tests, Daniel Glazman’s css3 selectors test (John Resig’s alternative test, using queryselectors) and the test suite from CSS3.info.

See also the detailed overview by David Hammond at nanobox (recent browser versions only). Codebitch e.a. compiled a similar chart some years ago. There is also a chart a Wikipedia and a historical overview of selector support in Gecko based browsers

contents

  1. Simple selectors, combinators, attribute selectors, class and id selectors
  2. pseudo-elements
  3. pseudo-classes
  4. namespaces
legend, color code used
OKSupported
NNot Supported
BBuggy: not implemented according to the specs, may cause problems
POnly partly implemented.
DDestroyed: serious bugs in the implementation
- not tested (yet)
SSupported – not extensively tested…
Simple selectors, combinators, attribute selectors, class and id selectors
versionGecko 1.7~1.9 [2]Opera 7.5~8.5Opera 9~10Safari 1.0~4.0.xiCab 3.0 [1]IE 8.0 WinIE 7.0 WinIE 5.5-6.0 WinIE 5.23 MacKonq 3.5 [1]
versionGecko 1.7~1.9 [2]Opera 7.5~8.5Opera 9~10Safari 1.0~4.0.xiCab 3.0 [1]IE 8.0 WinIE 7.0 WinIE 5.5-6.0 WinIE 5.23 MacKonq 3.5 [1]
* CSS 2 OK OK OKOKOKOKOKOKOKOK
ECSS 1OKOKOKOKOKOKOKOKOKOK
E F CSS 1 OK OKOK OKOKOKOKOKOKOK
E, F (grouping) [18] CSS 1 OK OK OKOKOKOKOKOKB [19]OK
E > F CSS 2 OK OK OKOKOKOK OKNOKOK
E + F CSS 2 OK OK OKOKOKOKB [23]NOKOK
E ~ F CSS 3 OK N OK P [3]OKOKOKNOKOK
E[foo] CSS 2 OK OKOKOKOKOKSNNOK
E[foo="bar"] CSS 2 OK OKOKOKOKOKSNNOK
E[foo~="bar"] CSS 2 OK OKOKOKOKOKSNNOK
E[foo^="bar"] CSS 3 OK NOKOKOKOKSNNOK
E[foo$="bar"] CSS 3 OK N OKOKOKOKSNNOK
E[foo*="bar"] CSS 3 OK NOKOKOKOKSNNOK
E[hreflang|="en"] CSS 2 OK OK OKOKOKSSNNOK
E.class CSS 1 OK OK OKOKOKOKOKOKOKOK
E#id CSS 1 OK OK OKOKOKOKOKOKOKOK
E#id.class CSS 2 OK OKOKOKOKOKBBBOK
E:not(s) CSS 3 OK NOK [28]OKNNNNNOK
pseudo-elements
versionGecko 1.7~1.9Opera 7.5~8.5Opera 9~10Safari 1.0~4.0.xiCab 3.0IE 8.0 WinIE 7.0 WinIE 5.5-6.0 WinIE 5.23 MacKonq 3.5
versionGecko 1.7~1.9Opera 7.5~8.5Opera 9~10Safari 1.0~4.0.xiCab 3.0IE 8.0 WinIE 7.0 WinIE 5.5-6.0 WinIE 5.23 MacKonq 3.5
E::first-lineCSS 1 [17] OK B [4] B [4] OK [27] OK OK [25] B [4] [25] B [4][5] B [4] [6]OK
E::first-letterCSS 1 [17] OK OKOKOKOKOK [25]B [24] [25]B [5][24]OKOK
E::selectionCSS 3 [26] N N OKOKNNNNNOK
E::beforeCSS 2 OK OK OKOKOKOK [25]NNNOK
E::afterCSS 2 OK OK OK OKOKOK [25]NNNOK
pseudo-classes
versionGecko 1.7~1.9.0Gecko 1.9.1Opera 7.5~9.1Opera 9.5~10Safari 1.0~1.2Safari 1.3-2.0xSafari 3.0Safari 3.2~4.0.xiCab 3.0IE 8.0 WinIE 7.0 WinIE 5.5-6.0 WinIE 5.23 MacKonq 3.5
versionGecko 1.7~1.9.0Gecko 1.9.1Opera 7.5~9.1Opera 9.5~10Safari 1.0~1.2Safari 1.3-2.0xSafari 3.0Safari 3.2~4.0.xiCab 3.0IE 8.0 WinIE 7.0 WinIE 5.5-6.0 WinIE 5.23 MacKonq 3.5
E:linkCSS 1OKOKOKOKOKOKOKOKOKOKOKOK OK OK
E:visitedCSS 1OKOKOKOKOKOKOKOKOKOKOKOK OK OK
E:activeCSS 1OKOKOKOKOKOKOKOKOK OK B [8] B [8] OK OK
E:hoverCSS 2OKOKOKOKOKOKOKOKOK OK S P [9] P [9] OK
E:focusCSS 2OKOKP [10]P [10]OKOKOKOKOK S N [8] N [8] OK OK
E:root CSS 3 OK OK N OK OK OKOK OKNNNNOKOK
E:targetCSS 3 OK OK N OK OK OK OKOKNNNN N OK
E:lang()CSS 2 OK OK OK OK N N - OK OK SNN OK OK
E:enabledCSS 3 P [21] OK P [7] OK N N OKOK N NNN P OK
E:disabledCSS 3 P [21] OK P [7] OK N N OKOK NNNNPOK
E:checkedCSS 3 OK OK P [7] OK N N OKOK NNNNPOK
E:nth-child(n)CSS 3 N OK N OK N NN OKNNNNNOK
E:nth-last-child(n)CSS 3 N OK N OK [28] N NN OK NNNNNOK
E:nth-of-type(n)CSS 3 N OK N OK N NN OK NNNNN-
E:nth-last-of-type(n)CSS 3 N OK N OK [28] N NN OK NNNNN-
E:first-childCSS 2 OK OK OK OK OKOK OK OK OK OKB [11] [23]B [11] [23] OK OK
E:last-childCSS 3 OK OK N OK OK D [12]N OK NNNNNOK
E:first-of-typeCSS 3 N OK N OK NN N OKNNNNNOK
E:last-of-typeCSS 3 N OK N OK N NN OK NNNNNOK
E:only-childCSS 3 P [21] OK N OK OK D [12]N OK NNNNNOK
E:only-of-typeCSS 3 N OK N OK N D [12]N OK NNNNNOK
E:emptyCSS 3 OK OK N OK B [22] B [22] B [22] OK NNNNNOK
namespaces
versionGecko 1.0~1.9Opera 7.5~8.5Opera 9~10Safari 1.0~1.2Safari 1.3~4.0.xiCab 3.0IE 8.0 WinIE 7.0 WinIE 5.5-6.0 WinIE 5.23 MacKonq 3.5
versionGecko 1.0~1.9Opera 7.5~8.5Opera 9~10Safari 1.0~1.2Safari 1.3~4.0.xiCab 3.0IE 8.0 WinIE 7.0 WinIE 5.5-6.0 WinIE 5.23 MacKonq 3.5
ns|E [15] CSS 3 OKB [14]OKNOKOKNNNNB [20]
*|E CSS 3 OKB [16]OKNOKOKNNNB [16]B [20]
*|* CSS 3 OKB [16]OKNOKOKNNNB [16]B [20]

Notes

  1. I have only tested Konqueror 3.5. Konqueror 4 reuses the code from WebKit, and is probably equivalent to Safari 3.0+. Similarly, iCab 3.0 uses its own rendering engine, but starting with iCab 4.0, it uses the build-in WebKit rendering engine (it thus behaves the same as the verion of Safari installed on the system).
  2. Gecko 1.9.1 (used by Firefox 3.5) fixes a lot of issues with dynamic changes, particularly with combinator selectors (+, ~)
  3. E ~ F support was added for Safari 3.0
  4. Opera up to 8.5: not supported for application/xhml+xml, lots of bugs with inheritance; Opera 9 fixes some of them, but not all. More bugfixes came with the release of Opera 9.1
    All browsers, except Gecko, Konqueror, Safari and IE8 Win: incorrect line-box when combined with :first-letter. IE 5-7 Windows and IE Mac treat ::first-line as a sort of block-level element.
  5. IE Windows (5.5, 6), seemingly supports the double :: notation, it is not clear if this is by design.
  6. IE Mac: single : notation only.
  7. Implemented (partly ?) in Opera 9.0, full support in Opera 9.5
  8. :active treated as :focus.
  9. only for the <a> element. Note also: IE Win, does not support the chaining of various pseudo-classes (a:link:hover or a:hover:visited); only the last pesudo-class in the chain is used.
  10. Opera: only for form–elements.
  11. IE 6, 7: bug paradise and unstable; untrustable in IE 5.5. Handle with great care.
  12. Matches all elements. For :last-child this is a regression in Safari 1.3+ and 2.0+ as it works correctly in Safari 1.0 ~ 1.2.x (in the css testsuite; my test page here works correctly, but the pseudo-class is applied to a block level element, and other selectors may override the :last-child). The has partly been fixed in recent nightly WebKit builds (dd 2006-01-11, but see bug 9840 and some related bugs in WebKits Bugzilla database).
  13. Gecko 1.7 + only. See the notes in my test case.
  14. Opera 7.5 applies the rule, even when no namespace is specified. Corrected in Opera 8.
  15. tested with the xhtml namespace: xhtml|E.
  16. Rule applied, it should be ignored if the concept of namespaces is not supported. In case of Opera, only Opera 7.5 is buggy. IE 5 Win simply ignores the first (namespace specific) part in the chain. I’m not sure if IE Mac has tentative support (experimental) for the universal namespace selector or if this is a bug. I suspect the latter for the same reason as IE Win.
  17. CSS 1 and 2: only the single : notation.
  18. Grouping: when the group contains a selector (i.e. a css3 combinator such as ~) that is not supported by the UA, it must ignore the whole group. See demo file for some details.
  19. IE Mac: it incorrectly recognizes a group that contains selectors or tokens that it does not support.
  20. Konqueror 3.5.1: lacks support for namespaces (and application/xhtml+xml in general). Both my tests and all the the namespace tests in the W3C testsuite give very conflicting results. Some selectors are applied when they should not be, some are ignored.
  21. implemented in Gecko 1.9.0.
  22. Safari — buggy when the styles are applied inline (embeded) and no external stylesheet is linked to the document, see test page.
  23. IE 7: fails when a html comment is inserted (html comments are actually counted as elements…);
  24. IE Windows: incorrect handling of the float property; multiple problems with inheritance. Some of these have been fixed in IE 7.
  25. Only CSS 2.1 single column notation (:).
  26. According to discussions on the mailing list from the CSS WG, ::selection will be dropped out of CSS 3 selectors module, due to poor UI–concepts and lack of clarity on how it should work.
  27. But note bug 3409: CSS1: Safari ignores "text-transform" attribute in "first-line" CSS rules
  28. First supported in Opera 9.6(?)

Misc

back to introduction

Last modified: February 10 2010 14:30:02 GMT.