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

 

Google Chrome Browser CSS Selector Support September 2, 2008

Filed under: Browsers, CSS (including hacks), Web Development — Estelle Weyl @ 5:27 pm

"Google Chrome," a browser based on the Webkit engine used by Safari, was released today. Chrome uses AppleWebKit/525.13. Safari 3.1 uses a slightly newer version: AppleWebKit/525.18. 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.

See also: CSS Hack for Google Chrome and Safari 3.1

    Browsers
Pattern Meaning IE6 IE7 IE8 FF Op
9		 Sf Op FF NS CHROME
E:active
E:hover
E:focus 		Dynamic pseudo-classes
Matches E during certain user actions. 		Δ Δ √ √ √ √ √ √ √ √
Δ Δ √ √ √ √ √ √ √ √
Χ Χ √ √ √ √ √ √ √ √
E:before
E:after		 Static pseudo-classes
See generated content		 Χ Χ Δ 3 √ √ √ √ √ √ √
Χ Χ Δ 3 √ √ √ √ √ √ √
  iPhn Windows XP Mac OSX
Selector Saf 3.0 Chrome FF 3.0 FF 2.0 FF 1.5 Op
9.0		 Saf
3.0		 IE8 IE7 IE6 Saf 3.1 Saf 1.3 Op FF 2 NS 7.1
* √ √ √ √ √ √ √ √ √ √ √ √ √ √ √
E √ √ √ √ √ √ √ √ √ √ √ √ √ √ √
.class √ √ √ √ √ √ √ √ √ Δ √ √ √ √ √
#id √ √ √ √ √ √ √ √ √ √ √ √ √ √ √
E F √ √ √ √ √ √ √ 1. √ √ √ √ √ √ √
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] Δ √ √ Δ Δ Χ Δ Χ 2 Χ Χ √ Δ Χ Δ Δ
E[attr$=val] Δ √ √ Δ Δ Χ Δ Χ 2 Χ Χ √ Δ Χ Δ Δ
E[attr*=val] Δ √ √ Δ Δ √ Δ Χ 2 Χ Χ √ Δ √ Δ Δ
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 √ √ √ √ √ √ √ Χ Χ Χ √ Χ √ √ √
Share and Enjoy:
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Google
  • YahooMyWeb
 

5 Comments for this post

 
Avalanche Says: September 3rd, 2008 at 10:56 am

Why don’t you use in comparison Opera 8.53? Or 7.0? Why 9.0? Haven’t you heard about 9.5x release?

 
D&V Says: September 4th, 2008 at 2:35 am

google chrome 的CSS hack来了…

浏览器多了也就这么个“好处”了…… 以下CSS语句目前只有Google Chrome和Safari 3.1可以正常解释。 body:nth-of-type(1) p { color: #333333; } 另外，以下是个浏览器对部分css的支持情况：……

 
cnspica Says: September 4th, 2008 at 8:52 am

非常难得的资料,想必浏览器又将是春秋战国了.

 
sureshsummy Says: August 1st, 2009 at 5:56 am

Hi i have created one site using with divs but its not showing properly in Google chrome. But in the Firefox,IE,Opera has showing very well so kindly send a java script code for attaching other style sheet for Google Chrome Browser my web site is (http://www.mfios.com)
so i don’t have knowledge in java script so that i am asking to you. …….send as early as possible

 
Estelle Weyl Says: August 1st, 2009 at 9:25 am

Hi Suressummy-

You should never need to use a hack for google chrome. If the page isn’t looking right, it most likely has to do with an HTML error.

In your case, you did not close out the <head> element. So, google chrome thinks (as you coded) that all of your content is in the head and should be hidden.

Leave a Reply