Check out
CSS2.1 Properties & Browser support
All 90 CSS2.1 properties, values & browser support

CSS, JavaScript and XHTML Explained

Estelle Weyl’s Blog of quirks, random thoughts and funky finds discovered in day-to-day coding

 

CSS Selectors and Browser Support April 29, 2007

Filed under: CSS (including hacks), IE7, Web Development — Estelle Weyl @ 12:42 am

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.
Share and Enjoy:
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Google
  • YahooMyWeb
 

3 Comments for this post

 
jasonw22 Says: April 29th, 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.

 
Estelle Says: July 10th, 2007 at 11:05 am

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

 
yman Says: October 27th, 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

Leave a Reply