CSS 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

Χ

Δ

Δ

Χ

Χ

Χ

Χ

Χ

Χ

Δ

Δ

:only-child

Χ

Δ

Δ

Χ

Χ

Χ

Χ

Χ

Χ

Δ

Χ

:nth-child()

Χ

Χ

Χ

Χ

Χ

Χ

Χ

Χ

Χ

Χ

Χ

:nth-last-child()

Χ

Χ

Χ

Χ

Χ

Χ

Χ

Χ

Χ

Χ

Χ

:first-of-type

Δ

Χ

Χ

Χ

Δ

Χ

Χ

Χ

Χ

Χ

Χ

:last-of-type

Χ

Χ

Χ

Χ

Χ

Χ

Χ

Χ

Χ

Χ

Χ

:only-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.

4 Responses to CSS Selectors and Browser Support

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.

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