Compatibility table: CSS3 Selectors

A few CSS3 selectors are already making their way into modern web browsers. Of the browsers tested thus far, Konqueror is the clear leader in implementation, with the Gecko (Mozilla, etc) engine not too far behind. In all cases I have used the latest current browser release, except for Internet Explorer where I’ve used the Beta of IE7 (as IE6 has no support at all).

Rather than go into depth about all the new selectors available in CSS3, you can read more about them in the W3C Selectors Working Draft and the excellent guide at 456 Berea St.

Note: The table below is not an exhaustive list of CSS3 selectors or modern browsers, it is only the beginning of a work in progress. As we continue to test, this table will expand. The tests have been run only on the most basic implementation of the selector, and should not be considered definitive.

CSS3 Selectors
Selector	Firefox > 3¹	IE 7	Opera 9.5	Safari 2.0	Safari 3.1	Konq. 3.5.4	OmniWeb 5.5 β1
E[foo*=”bar”]	Yes	Yes	Yes	Yes	Yes	Yes	Yes
E[foo$=”bar”]	Yes	Yes	Yes	Yes	Yes	Yes	Yes
E[foo^=”bar”]	Yes	Yes	Yes	Yes	Yes	Yes	Yes
E ~ F	Yes	Yes	Yes	Yes	Yes	Yes	Yes
:root²	Yes	No	Yes	Yes	Yes	Yes	Yes
:last-child	Yes	No	Yes	No³	Yes	Yes	No³
:nth-child()	No	No	Yes	No	Yes	Yes	No
:nth-last-child()	No	No	Yes	No	Yes	Yes	No
:only-child	Yes	No	Yes	No⁵	Yes	Yes	No⁵
:first-of-type	No	No	Yes	No	Yes	Yes	No
:last-of-type	No	No	Yes	No	Yes	Yes	No
:nth-of-type()	No	No	Yes	No	Yes	Yes	No
:nth-last-of-type()	No	No	Yes	No	Yes	Yes	No
:not()	Yes	No	Yes	Yes	Yes	Yes	Yes
:empty	Yes	No	Yes	Yes	Yes	Yes	Yes
:target	Yes	No	Yes	Yes	Yes	Yes	Yes
:enabled	Yes	No	Yes	No	Yes	Yes	No
:disabled	Yes	No	Yes	No	Yes	Yes	No
:checked	Yes³	No	Yes	No	Yes	Yes	Yes
:selection	Yes⁴	No	Yes	Yes	Yes	Yes	Yes

Includes other Gecko 1.8-based browsers; Mozilla Suite, Seamonkey, Camino, Flock, etc.
For HTML documents, styling :root is the same as styling html.
Support for styling checkboxes in Firefox is very limited.
Safari 2.1 and OmniWeb incorrectly apply this to all the selected elements.
With browser prefix.
Safari and OmniWeb incorrectly treat :only-child the same as :first-child.

Subscribe to our RSS

OUR SPONSORS

Advertise here?

CATEGORIES

FRIENDS

META2

TAG CLOUD