Google Chrome Browser CSS Selector Support September 2, 2008
"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 | √ | √ | √ | √ | √ | √ | √ | Χ | Χ | Χ | √ | Χ | √ | √ | √ |






I am on a panel at
Why don’t you use in comparison Opera 8.53? Or 7.0? Why 9.0? Haven’t you heard about 9.5x release?
google chrome 的CSS hack来了…
浏览器多了也就这么个“好处”了…… 以下CSS语句目前只有Google Chrome和Safari 3.1可以正常解释。 body:nth-of-type(1) p { color: #333333; } 另外,以下是个浏览器对部分css的支持情况:……
非常难得的资料,想必浏览器又将是春秋战国了.
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
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.