Google Chrome Browser CSS Selector Support

"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 Χ Δ Δ Χ Χ Χ Χ Χ Χ Χ Δ Δ
:o nly-child Χ Δ Δ Χ Χ Χ Χ Χ Χ Χ Δ Χ
:nth-child() Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ
:nth-last-child() Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ
:first-of-type Δ Χ Χ Χ Χ Δ Χ Χ Χ Χ Χ Χ Χ
:last-of-type Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ
:o nly-of-type Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ
:nth-of-type() Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ
:nth-last-of-type() Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ
:empty Χ Δ Δ Χ Χ Χ Χ Χ Χ Χ Δ Δ
:not() Χ Χ Χ Χ Χ
:target Χ Χ Χ Χ Χ
:enabled Χ Χ Χ Χ Χ
:disabled Χ Χ Χ Χ Χ
:checked Χ Χ Χ Χ
This entry was posted in Browsers, CSS (including hacks), Web Development. Bookmark the permalink.

6 Responses to Google Chrome Browser CSS Selector Support

  1. Avalanche says:

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

  2. Pingback: D&V

  3. cnspica says:

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

  4. sureshsummy says:

    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

  5. Estelle Weyl says:

    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.

  6. this is chrome solution css

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    .myClass { background-color: #FF0000; }
    #myId {color: #0000FF;}
    p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
    }

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>