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.

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.

http://www.css3.info/selectors-test/

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
POnly partly implemented.
DDestroyed: serious bugs in the implementation
- not tested (yet)
SSupported, applies to IE 7 win beta, based on release notes and very early testing.
Simple selectors, combinators, attribute selectors, class and id selectors
versionGecko 1.0~1.7Gecko 1.8-1.9Opera 7.5~8.5Opera 9, 9.1Safari 1.0~1.2Safari 1.3-2.0xiCab 3.0IE 7.0 beta WinIE 6.0 WinIE 5.5 WinIE 5.0 WinIE 5.23 MacKonqueror
versionGecko 1.0~1.7Gecko 1.8-1.9Opera 7.5~8.5Opera 9, 9.1Safari 1.0~1.2Safari 1.3-2.0xiCab 3.0IE 7.0 beta WinIE 6.0 WinIE 5.5 WinIE 5.0 WinIE 5.23 MacKonqueror
*CSS 2OKOKOKOKOKOKOKOKOKOKOKOKOK
ECSS 1OKOKOKOKOKOKOKOKOKOKOKOKOK
E FCSS 1OKOKOKOKOKOKOKOKOKOKOKOKOK
E, F (grouping) [18]CSS 1OKOKOKOKOKOKOKOKOKOKOKB [19]OK
E > FCSS 2OKOKOKOKOKOKOKS NNN [1]OKOK
E + FCSS 2OKOKOKOKOKOKOKS [23]NNN [1]OKOK
E ~ FCSS 3OK [2]OKNOKNN [3]OKSNNN [1]NOK
E[foo]CSS 2OKOKOKOKOKOKOKSNNNNOK
E[foo="bar"]CSS 2OKOKOKOKOKOKOKSNNNNOK
E[foo~="bar"]CSS 2OKOKOKOKOKOKOKSNNNNOK
E[foo^="bar"]CSS 3OKOKNOKOKOKOKSNNNNOK
E[foo$="bar"]CSS 3OKOKNOKOKOKOKSNNNNOK
E[foo*="bar"]CSS 3OKOKNOKOKOKOKSNNNNOK
E[hreflang|="en"]CSS 2OKOKOKOKOKOKOKSNNNNOK
E.classCSS 1OKOKOKOKOKOKOKOKOKOKOKOKOK
E#idCSS 1OKOKOKOKOKOKOKOKOKOKOKOKOK
E#id.classCSS 2OKOKOKOKOKOKOKSBBBBOK
E:not(s)CSS 3OKOKNNOKOKN-NNNNOK
pseudo-elements
versionGecko 1.0~1.7Gecko 1.8-1.9Opera 7.5~8.5Opera 9, 9.1Safari 1.0~1.2Safari 1.3-2.0xiCab 3.0IE 7.0 beta WinIE 6.0 WinIE 5.5 WinIE 5.0 WinIE 5.23 MacKonqueror
versionGecko 1.0~1.7Gecko 1.8-1.9Opera 7.5~8.5Opera 9, 9.1Safari 1.0~1.2Safari 1.3-2.0xiCab 3.0IE 7.0 beta WinIE 6.0 WinIE 5.5 WinIE 5.0 WinIE 5.23 MacKonqueror
E::first-lineCSS 1 [17]OKOKB [4]B [4]OKOKB [4]B [4]B [4][5]B [4] [5]NB [4] [6]OK
E::first-letterCSS 1 [17]OKOKOKOKOKOKOKB [24]B [5][24]-NOKOK
E::selectionCSS 3NNNNOKOKN-NNNNOK
E::beforeCSS 2OK [7]OKOKOKOKOKOKNNNNNOK
E::afterCSS 2OK [7]OKOKOKOKOKOKNNNNNOK
pseudo-classes
versionGecko 1.0~1.7Gecko 1.8-1.9Opera 7.5~8.5Opera 9, 9.1Safari 1.0~1.2Safari 1.3-2.0xiCab 3.0IE 7.0 beta WinIE 6.0 WinIE 5.5 WinIE 5.0 WinIE 5.23 MacKonqueror
versionGecko 1.0~1.7Gecko 1.8-1.9Opera 7.5~8.5Opera 9, 9.1Safari 1.0~1.2Safari 1.3-2.0xiCab 3.0IE 7.0 beta WinIE 6.0 WinIE 5.5 WinIE 5.0 WinIE 5.23 MacKonqueror
E:linkCSS 1OKOKOKOKOKOKOKOKOKOKOKOKOK
E:visitedCSS 1OKOKOKOKOKOKOKOKOKOKOKOKOK
E:activeCSS 1OKOKOKOKOKOKOKB [8]B [8]B [8]B [8]OKOK
E:hoverCSS 2OKOKOKOKOKOKOKSP [9]P [9]P [9]P [9]OK
E:focusCSS 2OKOKP [10]P [10]OKOKOKB [8]B [8]B [8]B [8]OKOK
E:rootCSS 3OKOKNNOKOKNNNNNOKOK
E:targetCSS 3OK [11]OKNNOKOKNNNNNNOK
E:lang()CSS 2OKOKOKOKNN [3]OKNNNNOKOK
E:enabledCSS 3NOKNPNN [3]N-NNNPOK
E:disabledCSS 3NOKNPNN [3]N-NNNPOK
E:checkedCSS 3OK [21]OKNPNN [3]N-NNNPOK
E:nth-child(n)CSS 3NNNNNNN----NOK
E:nth-last-child(n)CSS 3NNNNNNN----NOK
E:nth-of-type(n)CSS 3NNNNNNN----N-
E:nth-last-of-type(n)CSS 3NNNNNNN----N-
E:first-childCSS 2OKOKOKOKOKOKOKB [23]NNNOKOK
E:last-childCSS 3OKOKNNOKD [12]N-NNNNOK
E:first-of-typeCSS 3NNNNNN [3]N----NOK
E:last-of-typeCSS 3NNNNNN [3]N----NOK
E:only-childCSS 3NOKNNOKD [12]N-NNNNOK
E:only-of-typeCSS 3NNNNND [12]N----NOK
E:emptyCSS 3OK [13]OKNNB [22]B [22]N-NNNNOK
namespaces
versionGecko 1.0~1.7Gecko 1.8-1.9Opera 7.5~8.5Opera 9, 9.1Safari 1.0~1.2Safari 1.3-2.0xiCab 3.0IE 7.0 beta WinIE 6.0 WinIE 5.5 WinIE 5.0 WinIE 5.23 MacKonqueror
versionGecko 1.0~1.7Gecko 1.8-1.9Opera 7.5~8.5Opera 9, 9.1Safari 1.0~1.2Safari 1.3-2.0xiCab 3.0IE 7.0 beta WinIE 6.0 WinIE 5.5 WinIE 5.0 WinIE 5.23 MacKonqueror
ns|E [15]CSS 3OKOKB [14]OKNOKNNNNNNB [20]
*|ECSS 3OKOKB [16]OKNOKNNNNB [16]B [16]B [20]
*|*CSS 3OKOKB [16]OKNOKNNNNB [16]B [16]B [20]

Notes

  1. IE5.0 Win: with white-space surrounding the selector, the browser ignores all E before the combinator, and applies the rules to all element F
  2. From Gecko 1.7 upwards
  3. Recent (dd 2006-june-30) nightly builds of Webkit support this selector
  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 and Safari: incorrect line-box when combined with :first-letter. IE 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. Gecko, double :: notation from Gecko 1.5 upwards.
  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. Gecko 1.3 and up.
  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. Gecko 1.1 and up.
  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 (beta): fails when a comment is inserted (comments are actually counted...)
  24. IE Windows: incorrect handling of the float property; multiple problems with inheritance. Some of these have been fixed in IE 7.

Misc

back to introduction

Last modified: January 27 2007 02:13:39 GMT.