Firefox 3.5+, Safari 3.1+, Opera 9.64+, IE9+ and Google Chrome all support ALL CSS2.1 and CSS3 selectors. Here is a breakdown of all the browsers I’ve tested:
- Green / √ means current support.
- Orange / Δ means that the browsers have some support for the selector.
- Red / Χ means that the browser is non-compliant.
CSS Selectors and Browser Support
See also: CSS Properties & Values
Browsers | |||||||||
---|---|---|---|---|---|---|---|---|---|
Pattern | Meaning | IE6 | IE7 | IE8|IE9 | FireFox | Safari | Opera | NetSc | 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 |
Χ | Χ | √ | √ | √ | √ | √ | √ |
Χ | Χ | √ | √ | √ | √ | √ | √ |
Mobile | Windows XP & 7 | Mac OSX | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Selector | Saf 3.2 / And | Ch | FF 3.5 | O 9 | IE9 | IE8 | IE7 | IE 6 | Saf 3.1 | Chr | Op 9 | FF 3.6 |
* | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
E | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
.class | √ | √ | √ | √ | √ | √ | √ | Δ | √ | √ | √ | √ |
#id | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
E F | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
E > F | √ | √ | √ | √ | √ | √ | √ | Χ | √ | √ | √ | √ |
E + F | √ | √ | √ | √ | √ | √ | √ | Χ | √ | √ | √ | √ |
E[attr] | √ | √ | √ | √ | √ | Δ | Δ | Χ | √ | √ | √ | √ |
E[attr=val] | √ | √ | √ | √ | √ | √ | √ | Χ | √ | √ | √ | √ |
E[attr~=val] | √ | √ | √ | √ | √ | √ | Δ | Χ | √ | √ | √ | √ |
E[attr|=val] | √ | √ | √ | √ | √ | √ | Δ | Χ | √ | √ | √ | √ |
:first-child | √ | √ | √ | √ | √ | √ | Δ | Χ | √ | √ | √ | √ |
: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] | √ | √ | √ | √ | √ | √ | Χ | Χ | √ | √ | √ | √ |
E[attr$=val] | √ | √ | √ | √ | √ | √ | Χ | Χ | √ | √ | √ | √ |
E[attr*=val] | √ | √ | √ | √ | √ | √ | Χ | Χ | √ | √ | √ | √ |
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 | √ | √ | √ | √ | √ | Χ | Χ | Χ | √ | √ | √ | √ |
CSS Selectors Level 4 (UI Level 3)
Selector |
IE10 |
IE9 |
S a f 6
|
Ch 31 |
Op 17 |
FF 26 |
---|---|---|---|---|---|---|
E /foo/ F | Χ | Χ | Χ | Χ | Χ | Χ |
E! > F | Χ | Χ | Χ | Χ | Χ | Χ |
E:current | Χ | Χ | Χ | Χ | Χ | Χ |
E:indeterminate | √ | Χ | √ | √ | √ | √ |
E:default | Χ | Χ | √ | √ | √ | √ |
E:in-range | Χ | Χ | √ | √ | √ | √ |
E:out-of-range | Χ | Χ | √ | √ | √ | √ |
E:required | √ | Χ | √ | √ | √ | √ |
E:optional | √ | Χ | √ | √ | √ | √ |
E:read-only | Χ | Χ | √ | √ | √ | √ |
E:read-write | Χ | Χ | √ | √ | √ | √ |
E[foo=’bar’ i] | Χ | Χ | Χ | Χ | Χ | Χ |
E:nth-match(n of selector) | Χ | Χ | Χ | Χ | Χ | Χ |
E:column(selector) | Χ | Χ | Χ | Χ | Χ | Χ |
E:nth-column(n) | Χ | Χ | Χ | Χ | Χ | Χ |
E:nth-last-column(n) | Χ | Χ | Χ | Χ | Χ | Χ |
E:local-link | Χ | Χ | Χ | Χ | Χ | Χ |
Χ | Χ | Χ | Χ | Χ | Χ | |
E:any-link | Χ | Χ | Χ | Χ | Χ | Χ |
E:not(s1, s2) | Χ | Χ | Χ | Χ | Χ | Χ |
E:matches(s1, s2) | Χ | Χ | Χ | Χ | Χ | Χ |
E:dir(*) | Χ | Χ | Χ | Χ | Χ | Χ |
IE8 CSS Selector Support
IE8 Supports the CSS2.1 selectors, including pseudoclasses but not pseudo elements. (See Double Colon Notation). IE8 has support for has support for Accessible Rich Internet Applications (ARIA)
To force IE8 to render your page in IE8 compliance mode, include the following meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
IE7 within IE8 CSS Selector Support
The CSS selector support of IE7 within IE8 (when IE8 displayes a page in IE7 compatibility mode) is identical to IE7 as a standalone. However, the CSS properties do render differently. I will have to blog about that in a seperate entry when I get around to garnering all the differences.
IE7 within IE8 understands the IE7 star hack. Because the CSS renders differently even though the selector support is the same, it may take a bit before I figure out the best filter.
iPhone
The original version of the iPhone came with a Safari browser that did not support all CSS3 selectors. The currently active version of Safari on the iPhone does support all CSS3 selectors. The grid below has been updated to reflect that. I have kept the old version of the iPhone CSS3 support just in case you want to support “unlocked” version of the iPhone, that do not get updated as often. Personally, I assume all iphones hitting my apps support all CSS3. For more information on iPhones, see iPhone CSS Support
Safari 4 Support
Safari 4 supports ARIA, CSS3 effects and animation and HTML5 canvas, datastorage and other CSS3 and HTML5 properties and elements. Safari 4 is Acid 3 compliant.
IE8 Notes:
- E[attr]Does not match the attribute when the attribute value is empty or not written correctly.
IE7 within IE8 Notes:
- E[attr] Same as IE8, does not match the attribute when the attribute value is empty or not written correctly.
- E[attr~=val]Only issue is that for this selector to work, the value of the attribute is case sensitive
- E[attr|=val]IE7 has some case sensitivity issues, but generally works.
- :first-child IE7 considers a comment or a text node as a first-child, when it shouldn’t: only elements should be considered children. So, IE7 matches the first comment instead of the first child. If it sees text or a comment as the first child, it will not consider the first element as the first child.
More about Safari 5.0 not supporting :visited and :link is at http://www.evotech.net/blog/2010/06/safari-5-link-selector-bug/
Good work, instant bookmark.
However, “Windows XP” and IE9 and IE10? :)
[…] Standardista » CSS3 Selectors & Browser Support […]
All new browsers now support all selectors. This grid, therefore, will not be updated until CSS4 selectors begin having browser support, at which point an update will be relevant. Note: IE9, IE10, FF4, FF48 (or whatever # we’re at), Chrome, Safari, and Opera all support all of the selectors!
Hi Estelle,
I’m using Chrome (Version 47.0.2526.106 m).
In the section (CSS Selector Browser Support) The table is not clear.
The first (from the left) column (Pattern) is over the second column and it’s not clear what it says.
The second column (again from the left), the need to be no-wrap because it’s not clear what it says.
All & all great site