CSS, JavaScript and XHTML Explained

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 @ 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.
 

4 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.

 
CSS, JavaScript and XHTML Explained » Targeting Safari 3.0 with CSS Says: June 22nd, 2007 at 1:17 pm

[…] updated my Browser Support of CSS Selectors spreadsheet in case you want to geek out too. Spread the love & knowledge: These icons link to social […]

 
The Bliss Story » Blog Archive » CSS Selectors and Browser Support Says: June 24th, 2007 at 7:08 pm

[…] CSS 셀렉터들과 브라우저 지원상황에 대해 정리한 Chart가 보이길래 가져왔습니다. 원본 출처는 http://www.evotech.net/blog/2007/04/css-selectors-and-browser-support/ […]

 
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.

Leave a Reply

You must be logged in to post a comment.