CSS, JavaScript and XHTML Explained

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 — estellevw @ 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
 

23 Comments for this post

 
GoogleさんのChromeを使ってみたよ | gaspanik weblog Says: September 2nd, 2008 at 7:25 pm

[...] ※書いてから気付いたのですが、Google ChromeのWeb開発者向けの情報はこちらのページに掲載されてます。良かったですねえ、珍しく日本語版があって（笑）。 ※それとChromeやそれ以外のブラウザのサポートしているセレクタが、早速evotech.netの「Google Chrome Browser CSS Selector Support」という記事で表になって公開されています。 [...]

 
Google Chrome e o suporte a CSS » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards Says: September 3rd, 2008 at 6:23 am

[...] Estou vendo algumas pessoas falarem do Google Chrome, que alguns sites o CSS não está funcionando corretamente, mas vendo hoje pela manhã meus feeds acabei encontrando uma tabela de suporte a CSS no Google Chrome: [...]

 
Mikael Carrara » Blog Archive » Google Chrome Says: September 3rd, 2008 at 7:46 am

[...] Pra você entender a superioridade desse navegador, o Internet Explorer 8 que tanto se gaba de passar no teste da Acid2, tem suporte a apenas 1 seletor (E ~ F), enquanto que o Chrome tem suporte a todos os novos seletores da CSS3. [...]

 
Google Chrome: novo browser para as massas? · Portfolio e blog sobre Web Standards - project.47 Says: September 3rd, 2008 at 10:51 am

[...] j foi divulgada uma tabela com diversos seletores CSS e o suporte oferecido pelo Google Chrome que, diga-se de passagem, [...]

 
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?

 
Tabela de compatibilidade CSS atualizada com Google Chrome - Richard Barros Says: September 3rd, 2008 at 1:24 pm

[...] entender melhor a compatibilidade do CSS nos browsers atuais, o blog do evotech.net publicou umatabela atualizadade suporte a CSS nos browsers atuais (essa eu vi primeiro noPinceladas da [...]

 
Google Chrome - primeiras impressões sobre o navegador da Google | desenvolvimento para web Says: September 3rd, 2008 at 1:36 pm

[...] para o pessoal de desenvolvimento para web, aí vai uma tabela de suporte a CSS da primeira versão do Google Chrome. [...]

 
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的支持情况：……

 
Fatih Hayrioğlu'nun not defteri » Google Chrome - Birde benden dinleyin :D » çıkan, tarayıcının, ardından, yapıp, yazı, yazıyorum, Tabi, Google, Chrome, içinde Says: September 4th, 2008 at 7:38 am

[...] Google Chrome Safari’nin de alt yapısını oluşturan Webkit alt yapısı ile çalışıyor, buda bize Safari neyi destekliyorsa Google Chrome onu destekler ipucunu veriyor. Bir iki özellik(text-shadow ve @font-face) dışında aynı özellikleri destekliyor. CSS destek listesini görmek için tıklayınız. [...]

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

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

 
Xiaoxiao's Weblog - 我也谈谷歌浏览器Chrome Says: September 4th, 2008 at 12:57 pm

[...] 　　3. how fast is your browser? 　　4. JavaScript Performance Rundown 　　5. Chrome的hack写法以及CSS的支持程度 　　6. 谷歌Chrome浏览器开发内幕  原版 　　7. [...]

 
哉崽 Says: September 4th, 2008 at 10:18 pm

胜负已见分晓，Winner is GC(Google Chrome)!

┌┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┐
├IE┼●┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├GC┼○┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼○┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼○┼●┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼○┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼●○┼○┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼○●┼┼○┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼●┼┼●┼┼●┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
└┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┘

 
麦鸡的博客 » Google Chrome的一些 Says: September 5th, 2008 at 1:58 am

[...] 大家都知道是基于webkit的，跟Safari3.1非常像。有人已经写了它所支持的css选择器。http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/，该网站也列出了chrome的css hack，hedgerwow列一个Safari hack，当然chrome也能用。。 [...]

 
Google Chrome | Tb-one.se Says: September 5th, 2008 at 6:58 am

[...] “artikel” :p. Men Google Chrome är en ny webbläsare skapad av google. Google Chrome CSS stöd  Sprid denna post: These icons link to social bookmarking sites where readers can share and [...]

 
Tópicos Avançados » Compatibilidade CSS Says: September 5th, 2008 at 4:22 pm

[...] navegador Safari 3.1 são hoje (05/09/2008) os navegadores com o maior suporte a seletores CSS. No blog evotech sobre desenvolvimento web, você encontra uma tabela completa sobre quais seletores CSS estão [...]

 
Compulsive » Eu também quero falar do Chrome Says: September 6th, 2008 at 7:23 am

[...] e atrasar o desenvolvimento da web! Para desenvolvedores: O Chrome pega tudo! Ui! Seletores css: http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/ Rack: http://www.pinceladasdaweb.com.br/blog/2008/09/05/css-hack-para-google-chrome-e-safari-31/ [...]

 
CSS triki za Google CHROME brskalnik | .: TRSplet - internetne storitve .: Says: September 8th, 2008 at 9:24 pm

[...] selektorjev, katere bi upošteval samo Safari in Chrome (seznam podprtih CSS selektorjev si oglejte tukaj). Ker je novi Googlov brskalnik Chrome v tem pogledu enak pomeni, da imam še dodatno težavo. K [...]

 
Javcin’s Attitude » Google Chrome浏览器的CSS Hack写法以及CSS的支持程度 Says: September 30th, 2008 at 10:04 am

[...] Chrome的CSS支持程度 引用自 Estelle [...]

 
Vivian Crap » Blog Archive » CSS Hacks Says: October 4th, 2008 at 3:04 am

[...] Browser CSS Selector Support posted under CSS [...]

 
Google Chrome 浏览器支持的CSS选择器  — 小娄 Says: October 9th, 2008 at 7:23 pm

[...] Google Chrome 浏览器是基于 Safari 正在使用的 Webkit 引擎，使用的版本是 AppleWebKit/525.13 。不过 Safari3.1 使用的是最新版本：AppleWebKit/525.18。 Google Chrome 浏览器支持所有 CSS 选择器，下面是Engage 公司的女前端开发工程师 Estelle 测试整理的《Google Chrome Browser CSS Selector Support》： http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/ [...]

 
Google Chrome 浏览器支持的CSS选择器  — 企鹅 Says: October 10th, 2008 at 9:46 pm

[...] Google Chrome 浏览器是基于 Safari 正在使用的 Webkit 引擎，使用的版本是 AppleWebKit/525.13 。不过 Safari3.1 使用的是最新版本：AppleWebKit/525.18。 Google Chrome 浏览器支持所有 CSS 选择器，下面是Engage 公司的女前端开发工程师 Estelle 测试整理的《Google Chrome Browser CSS Selector Support》： http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/ [...]

 
风为人世在，在世人为风。—power by welefen » Blog Archive » 各个浏览器支持的CSS选择器，包括Chrome Says: October 13th, 2008 at 6:07 am

[...] Engage 公司的女前端开发工程师 Estelle 测试整理的《Google Chrome Browser CSS Selector Support》，原文地址：http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/ [...]

 
CSS селекторы поддерживаемые браузером Google Chrome | Вебмастеру посвящается... Says: November 7th, 2008 at 1:24 am

[...] http://www.evotech.net, перевод и адаптация”Вебмастеру [...]

Leave a Reply