"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 | √ | √ | √ | √ | √ | √ | √ | Χ | Χ | Χ | √ | Χ | √ | √ | √ |
Why don’t you use in comparison Opera 8.53? Or 7.0? Why 9.0? Haven’t you heard about 9.5x release?
Pingback: D&V
éžå¸¸éš¾å¾—的资料,想必æµè§ˆå™¨åˆå°†æ˜¯æ˜¥ç§‹æˆ˜å›½äº†.
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.
You have done a great jobï¼
IE8 support :first-line and :first-letter
IE6 not support :first-line and :first-letter
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);
}