Blog

The Cross-Browser Compatibility Guide – CSS Selectors Browser Support

the_cross_browser_compatibility_guide-_CSS_rules_across_browsers
Web Development

The Cross-Browser Compatibility Guide – CSS Selectors Browser Support

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 browsers support every CSS 2 Selector. But if you want to target older Browsers you may want to avoid some of those.

SelectorIE 6IE 7IE 8IE 9FirefoxChromeSafariOpera
E:activePartlyPartlyYesYesYesYesYesYes
E:hoverPartlyPartlyYesYesYesYesYesYes
E:focusNoNoYesYesYesYesYesYes
E:beforeNoNoYesYesYesYesYesYes
E:afterNoNoYesYesYesYesYesYes
*YesYesYesYesYesYesYesYes
EYesYesYesYesYesYesYesYes
.classPartlyYesYesYesYesYesYesYes
#idYesYesYesYesYesYesYesYes
E FYesYesYesYesYesYesYesYes
E > FNoYesYesYesYesYesYesYes
E + FNoYesYesYesYesYesYesYes
E[attr]NoPartlyYesYesYesYesYesYes
E[attr=val]NoYesYesYesYesYesYesYes
E[attr~=val]NoPartlyYesYesYesYesYesYes
E[attr|=val]NoPartlyYesYesYesYesYesYes
:first-childNoPartlyYesYesYesYesYesYes
:lang()NoNoYesYesYesYesYesYes
:first-letterYesYesYesYesYesYesYesYes
:first-lineYesYesYesYesYesYesYesYes

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 users cannot upgrade even if they would like to.

SelectorIE 6IE 7IE 8IE 9FirefoxChromeSafariOpera
E[attr^=val]NoNoYesYesYesYesYesYes
E[attr$=val]NoNoYesYesYesYesYesYes
E[attr*=val]NoNoYesYesYesYesYesYes
E ~ FNoYesYesYesYesYesYesYes
:rootNoNoNoYesYesYesYesYes
:last-childNoNoNoYesYesYesYesYes
:only-childNoNoNoYesYesYesYesYes
:nth-child()NoNoNoYesYesYesYesYes
:nth-last-child()NoNoNoYesYesYesYesYes
:first-of-typeNoNoNoYesYesYesYesYes
:last-of-typeNoNoNoYesYesYesYesYes
:only-of-typeNoNoNoYesYesYesYesYes
:nth-of-type()NoNoNoYesYesYesYesYes
:nth-last-of-type()NoNoNoYesYesYesYesYes
:emptyNoNoNoYesYesYesYesYes
:not()NoNoNoYesYesYesYesYes
:targetNoNoNoYesYesYesYesYes
:enabledNoNoNoYesYesYesYesYes
:disabledNoNoNoYesYesYesYesYes
:checkedNoNoNoYesYesYesYesYes

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