The cross-browser compatibility guide - CSS selectors browser support

16. March 2012 10:33 by Daniel Herken

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.

Pingbacks and trackbacks (1)+