Note: This grid is OUTDATED! Please see Grid of CSS3 Selectors and Browser Support
Below are the various CSS selectors, including CSS3 selectors, and current browser support. Green / √ means current support. Orange / Δ means that the browsers have some support for the selector. Red / Χ means that the browser is non-compliant. Non-compliant selectors can be used and a valid way to target individual browsers.
| iPhn | Windows XP | Mac OSX | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Selector | Saf 3.0 | FF 2.0 | FF 1.5 | Op 9.0 |
Saf 3.0 |
IE7 | IE6 | Saf 1.3 | Op | FF 2 | NS 7.1 |
| * | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
| E | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
| .class | √ | √ | √ | √ | √ | √ | 1. | √ | √ | √ | √ |
| #id | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
| E F | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
| E > F | √ | √ | √ | √ | √ | √ | Χ | √ | √ | √ | √ |
| E + F | √ | √ | √ | √ | √ | √ | Χ | √ | √ | √ | √ |
| E[attr] | √ | √ | √ | √ | √ | Δ | Χ | √ | √ | √ | Δ |
| E[attr=val] | Δ | Δ | Δ | Δ | Δ | √ | Χ | Δ | Δ | Δ | Δ |
| E[attr~=val] | Δ | Δ | Δ | √ | Δ | Δ | Χ | Δ | √ | Δ | Δ |
| E[attr|=val] | Δ | Δ | Δ | √ | Δ | Δ | Χ | Δ | √ | Δ | Δ |
| :first-child | Δ | Δ | Δ | Δ | Δ | Δ | Χ | Δ | Δ | Δ | √ |
| :link | √ | √ | √ | Χ | √ | √ | √ | √ | √ | √ | √ |
| :visited | √ | √ | √ | Χ | √ | √ | √ | √ | √ | √ | √ |
| :lang() | √ | √ | √ | Δ | √ | Χ | Χ | Χ | Δ | √ | √ |
| :before | √ | √ | √ | √ | √ | Χ | Χ | √ | √ | √ | Χ |
| ::before | √ | √ | √ | √ | √ | Χ | Χ | √ | √ | √ | Χ |
| :after | √ | √ | √ | √ | √ | Χ | Χ | √ | √ | √ | Χ |
| ::after | √ | √ | √ | √ | √ | Χ | Χ | √ | √ | √ | Χ |
| :first-letter | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | Χ |
| ::first-letter | √ | √ | √ | √ | √ | Χ | √ | √ | √ | √ | Χ |
| :first-line | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | Χ |
| ::first-line | √ | √ | √ | √ | √ | Χ | √ | √ | √ | √ | Χ |
| The following selectors are new to CSS3 (above were in previous versions) | |||||||||||
| E[attr^=val] | Δ | Δ | Δ | Χ | Δ | Χ | Χ | Δ | Χ | Δ | Δ |
| E[attr$=val] | Δ | Δ | Δ | Χ | Δ | Χ | Χ | Δ | Χ | Δ | Δ |
| E[attr*=val] | Δ | Δ | Δ | √ | Δ | Χ | Χ | Δ | √ | Δ | Δ |
| E ~ F | √ | √ | √ | √ | √ | √ | Χ | Χ | √ | √ | Χ |
| :root | √ | √ | √ | Χ | √ | Χ | Χ | √ | Χ | √ | √ |
| :last-child | Χ | Δ | Δ | Χ | Χ | Χ | Χ | Χ | Χ | Δ | Δ |
 nly-child |
Χ | Δ | Δ | Χ | Χ | Χ | Χ | Χ | Χ | Δ | Χ |
| :nth-child() | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ |
| :nth-last-child() | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ |
| :first-of-type | Δ | Χ | Χ | Χ | Δ | Χ | Χ | Χ | Χ | Χ | Χ |
| :last-of-type | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ |
| nly-of-type |
Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ |
| :nth-of-type() | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ |
| :nth-last-of-type() | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ |
| :empty | Χ | Δ | Δ | Χ | Χ | Χ | Χ | Χ | Χ | Δ | Δ |
| :not() | √ | √ | √ | Χ | √ | Χ | Χ | √ | Χ | √ | √ |
| :target | √ | √ | √ | Χ | √ | Χ | Χ | √ | Χ | √ | √ |
| :enabled | √ | √ | √ | √ | √ | Χ | Χ | Χ | √ | √ | Χ |
| :disabled | √ | √ | √ | √ | √ | Χ | Χ | Χ | √ | √ | Χ |
| :checked | √ | √ | √ | √ | √ | Χ | Χ | Χ | √ | √ | √ |
Notes:
-
1. IE6 doesn’t errs on mulitple classes. A double class such as
.red.green { } .green { } <p class="green red"></p>Both CSS selectors should match, but the dual declaration should take precendence as it is more specific. So the second should be able to define additional properties, but not overwrite properties from the first. IE6 fails here.
- Check out the definition of Double Colon Notation
- The Avant Browser selector support is identical to IE7. It was removed from the list to make the table narrower.
Nice chart. Looks familiar, but more thorough than PPK’s chart, which I’ve used in the past. Do you have a test suite that you’re using to check for compatibility? Are you finding a lot of users with the Avant browser in your logs?
In practice, I’ve never had a need for more than about the first 7 selectors in this chart. However, if you need full cross-browser CSS3 selector support, take a look at jQuery.
I added Safari 3.0 for the iPhone. It works about the same as for Windows.
Now i’m using the new version of Avant Browser and i think it’s really good. One issue is if Avant Browser is closed improperly, all open web pages are saved and will be automatically reopened at next startup. I got from here:rosoftdownload.com/download/Windows/Avant-Browser
yeah! that’s exactly what I was looking for! great chart, very comprehensive and clear