CSS Selectors and Browser Support

Posted on April 29, 2007 by Estelle Weyl

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 Χ Δ Δ Χ Χ Χ Χ Χ Χ Δ Δ
: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.

  • 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.
This entry was posted in CSS (including hacks), IE7, Web Development. Bookmark the permalink.

4 Responses to CSS Selectors and Browser Support

  1. jasonw22 says:
    April 29, 2007 at 8:52 am

    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.

    Reply
  2. Estelle says:
    July 10, 2007 at 11:05 am

    I added Safari 3.0 for the iPhone. It works about the same as for Windows.

    Reply
  3. yman says:
    October 27, 2008 at 4:52 am

    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

    Reply
  4. Jimo says:
    July 8, 2010 at 7:57 am

    yeah! that’s exactly what I was looking for! great chart, very comprehensive and clear

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *