Blog We love to talk!

Mar Fri

The cross-browser compatibility guide – CSS selectors browser support

  •  3-16-2012

Welcome to the third part of the cross-browser compatibility guide. You can find the directory here.

CSS selectors browser support

In this post I would like to show which CSS selectors are supported in the different browsers.

CSS 2 Selectors

Today all current versions of major browser support every CSS 2 Selector. But if you want to target older Browsers you may want to avoid some of those.

Selector IE 6 IE 7 IE 8 IE 9 Firefox Chrome Safari Opera
E:active Partly Partly Yes Yes Yes Yes Yes Yes
E:hover Partly Partly Yes Yes Yes Yes Yes Yes
E:focus No No Yes Yes Yes Yes Yes Yes
E:before No No Yes Yes Yes Yes Yes Yes
E:after No No Yes Yes Yes Yes Yes Yes
* Yes Yes Yes Yes Yes Yes Yes Yes
E Yes Yes Yes Yes Yes Yes Yes Yes
.class Partly Yes Yes Yes Yes Yes Yes Yes
#id Yes Yes Yes Yes Yes Yes Yes Yes
E F Yes Yes Yes Yes Yes Yes Yes Yes
E > F No Yes Yes Yes Yes Yes Yes Yes
E + F No Yes Yes Yes Yes Yes Yes Yes
E[attr] No Partly Yes Yes Yes Yes Yes Yes
E[attr=val] No Yes Yes Yes Yes Yes Yes Yes
E[attr~=val] No Partly Yes Yes Yes Yes Yes Yes
E[attr|=val] No Partly Yes Yes Yes Yes Yes Yes
:first-child No Partly Yes Yes Yes Yes Yes Yes
:lang() No No Yes Yes Yes Yes Yes Yes
:first-letter Yes Yes Yes Yes Yes Yes Yes Yes
:first-line Yes Yes Yes Yes Yes Yes Yes Yes

CSS 3 Selectors

With all the new shiny CSS 3 selectors available things tend to get tricky. Every modern browser supports all of them, but if you need to support older versions of Internet Explorer you are generally out of luck. And many Windows user cannot upgrade event if they would like to.

Selector IE 6 IE 7 IE 8 IE 9 Firefox Chrome Safari Opera
E[attr^=val] No No Yes Yes Yes Yes Yes Yes
E[attr$=val] No No Yes Yes Yes Yes Yes Yes
E[attr*=val] No No Yes Yes Yes Yes Yes Yes
E ~ F No Yes Yes Yes Yes Yes Yes Yes
:root No No No Yes Yes Yes Yes Yes
:last-child No No No Yes Yes Yes Yes Yes
:only-child No No No Yes Yes Yes Yes Yes
:nth-child() No No No Yes Yes Yes Yes Yes
:nth-last-child() No No No Yes Yes Yes Yes Yes
:first-of-type No No No Yes Yes Yes Yes Yes
:last-of-type No No No Yes Yes Yes Yes Yes
:only-of-type No No No Yes Yes Yes Yes Yes
:nth-of-type() No No No Yes Yes Yes Yes Yes
:nth-last-of-type() No No No Yes Yes Yes Yes Yes
:empty No No No Yes Yes Yes Yes Yes
:not() No No No Yes Yes Yes Yes Yes
:target No No No Yes Yes Yes Yes Yes
:enabled No No No Yes Yes Yes Yes Yes
:disabled No No No Yes Yes Yes Yes Yes
:checked No No No Yes Yes Yes Yes Yes

 

How to get CSS 3 Selector support in IE 6, 7 and 8

Want to use the new CSS 3 selectors but need to support older Internet Explorer versions? Try Selectivizr to emulate the new selectors in older browsers.

Photo by Steven Guzzardi

No Comments

Leave a Reply

Your email address will not be published.