Browser CSS Selector Support May 24, 2008
Grid showing browser support for CSS selectors. This CSS3 Selector Support chart includes the new Firefox 3.0 beta,
IE8 beta and Safari 3.1 on both Mac and Windows. Congratulations to Safari 3.1 for being the first mainstream browser to support all CSS3 selectors. WooHoo!
Browsers are listed by operating system: Windows, Mac and iPhone. If the chart is overwhelming, hover to get your bearings. Some of the “buggy” results have explanations on hover too.
- Selectors
- *
- E
- .class
- #id
- E F
- E > F
- E + F
- E[attribute]
- E[attribute=value]
- E[attribute~=value]
- E[attribute|=value]
- :first-child
- :link
- :visited
- :lang()
- :before
- ::before
- :after
- ::after
- :first-letter
- ::first-letter
- :first-line
- ::first-line
- E[attribute^=value]
- E[attribute$=value]
- E[attribute*=value]
- 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
- Saf 3.1
- *
- E
- .class
- #id
- E F
- E > F
- E + F
- E[attribute]
- E[attribute=value]
- E[attribute~=value]
- E[attribute|=value]
- :first-child
- :link
- :visited
- :lang()
- :before
- ::before
- :after
- ::after
- :first-letter
- ::first-letter
- :first-line
- ::first-line
- E[attribute^=value]
- E[attribute$=value]
- E[attribute*=value]
- 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
- Saf 3.0
- *
- E
- .class
- #id
- E F
- E > F
- E + F
- E[attribute]
- E[attribute=value]: buggy
- E[attribute~=value]: buggy
- E[attribute|=value]: buggy
- :first-child: buggy
- :link
- :visited
- :lang(): buggy
- :before
- ::before
- :after
- ::after
- :first-letter
- ::first-letter
- :first-line
- ::first-line
- E[attribute^=value]: buugy
- E[attribute$=value]: buggy
- E[attribute*=value]: buggy
- E ~ F
- :root
- :last-child: failed
- :only-child: failed
- :nth-child(): failed
- :nth-last-child(): failed
- :first-of-type: buggy
- :last-of-type: failed
- :only-of-type: failed
- :nth-of-type(): failed
- :nth-last-of-type(): failed
- :empty: failed
- :not()
- :target
- :enabled
- :disabled
- :checked
- Saf 1.3
- *
- E class=”failed”
- .class
- #id
- E F
- E > F
- E + F
- E[attr]
- E[attr=val]: buggy
- E[attr~=val]: buggy
- E[attr|=val]: buggy
- :first-child: buggy
- :link
- :visited
- :lang(): failed
- :before
- ::before
- :after
- ::after
- :first-letter
- ::first-letter
- :first-line
- ::first-line
- E[attr^=val]: buggy
- E[attr$=val]: buggy
- E[attr*=val]: buggy
- E ~ F: failed
- :root
- :last-child/li>
- :only-child: failed
- :nth-child(): failed
- :nth-last-child(): failed
- :first-of-type: failed
- :last-of-type: failed
- :only-of-type: failed
- :nth-of-type(): failed
- :nth-last-of-type(): failed
- :empty: failed
- :not()
- :target
- :enabled: failed
- :disabled: failed
- :checked: failed
- FF 2.0
- *
- E
- .class
- #id
- E F
- E > F
- E + F
- E[attribute]
- E[attribute=value]: buggy
- E[attribute~=value]: buggy
- E[attribute|=value]: buggy
- :first-child: buggy
- :link
- :visited
- :lang()
- :before
- ::before
- :after
- ::after
- :first-letter
- ::first-letter
- :first-line
- ::first-line
- E[attribute^=value]: buggy
- E[attribute$=value]: buggy
- E[attribute*=value]: buggy
- E ~ F
- :root
- :last-child: buggy
- :only-child: buggy
- :nth-child(): failed
- :nth-last-child(): failed
- :first-of-type: failed
- :last-of-type: failed
- :only-of-type: failed
- :nth-of-type(): failed
- :nth-last-of-type(): failed
- :empty: buggy
- :not()
- :target
- :enabled
- :disabled
- :checked
- OP 9.1
- *
- E
- .class
- #id
- E F
- E > F
- E + F
- E[attribute]
- E[attribute=value]: buggy
- E[attribute~=value]
- E[attribute|=value]
- :first-child: buggy
- :link
- :visited
- :lang(): buggy
- :before
- ::before
- :after
- ::after
- :first-letter
- ::first-letter
- :first-line
- ::first-line
- E[attribute^=value]: failed
- E[attribute$=value]: failed
- E[attribute*=value]
- E ~ F
- :root: failed
- :last-child: failed
- :only-child: failed
- :nth-child(): failed
- :nth-last-child(): failed
- :first-of-type: failed
- :last-of-type: failed
- :only-of-type: failed
- :nth-of-type(): failed
- :nth-last-of-type(): failed
- :empty: failed
- :not(): failed
- :target: failed
- :enabled
- :disabled
- :checked
- NS 7.1
- *
- E
- .class
- #id
- E F
- E > F
- E + F
- E[attribute]: buggy
- E[attribute=value]: buggy
- E[attribute~=value]: buggy
- E[attribute|=value]: buggy
- :first-child
- :link
- :visited
- :lang()
- :before
- ::before: failed
- :after: failed
- ::after: failed
- :first-letter: failed
- ::first-letter: failed
- :first-line: failed
- ::first-line: failed
- E[attribute^=value]: buggy
- E[attribute$=value]: buggy
- E[attribute*=value]: buggy
- E ~ F: failed
- :root
- :last-child: buggy
- :only-child: failed
- :nth-child(): failed
- :nth-last-child(): failed
- :first-of-type: failed
- :last-of-type: failed
- :only-of-type: failed
- :nth-of-type(): failed
- :nth-last-of-type(): failed
- :empty: buggy
- :not()
- :target
- :enabled: failed
- :disabled: failed
- :checked
- FF 3.0
- *
- E
- .class
- #id
- E F
- E > F
- E + F
- E[attribute]
- E[attribute=value]
- E[attribute~=value]
- E[attribute|=value]
- :first-child
- :link
- :visited
- :lang()
- :before
- ::before
- :after
- ::after
- :first-letter
- ::first-letter
- :first-line
- ::first-line
- E[attribute^=value]
- E[attribute$=value]
- E[attribute*=value]
- E ~ F
- :root
- :last-child
- :only-child
- :nth-child(): failed
- :nth-last-child(): failed
- :first-of-type: failed
- :last-of-type: failed
- :only-of-type: failed
- :nth-of-type(): failed
- :nth-last-of-type(): failed
- :empty
- :not()
- :target
- :enabled
- :disabled
- :checked
- FF 2.0
- *
- E
- .class
- #id
- E F
- E > F
- E + F
- E[attribute]
- E[attribute=value]: buggy
- E[attribute~=value]: buggy
- E[attribute|=value]: buggy
- :first-child: buggy
- :link
- :visited
- :lang()
- :before
- ::before
- :after
- ::after
- :first-letter
- ::first-letter
- :first-line
- ::first-line
- E[attribute^=value]: buggy
- E[attribute$=value]: buggy
- E[attribute*=value]: buggy
- E ~ F
- :root
- :last-child: buggy
- :only-child: buggy
- :nth-child(): failed
- :nth-last-child(): failed
- :first-of-type: failed
- :last-of-type: failed
- :only-of-type: failed
- :nth-of-type(): failed
- :nth-last-of-type(): failed
- :empty: buggy
- :not()
- :target
- :enabled
- :disabled
- :checked
- IE 8.0
- *
- E
- .class
- #id
- E F: buggy
- E > F
- E + F
- E[attribute] - empty values, and attributes without a value, like ’selected’ are not matched
- E[attribute=value] - not case sensitive
- E[attribute~=value] - assumes attribute values are case sensitive: buggy
- E[attribute|=value] - assumes attribute values are case sensitive: buggy
- :first-child - comments and text nodes are not supposed to be considered children: buggy
- :link
- :visited
- :lang(): buggy
- :before
- ::before: failed
- :after
- ::after: failed
- :first-letter: failed
- ::first-letter: failed
- :first-line: failed
- ::first-line: failed
- E[attribute^=value]: failed
- E[attribute$=value]: failed
- E[attribute*=value]: failed
- E ~ F
- :root: failed
- :last-child: failed
- :only-child: failed
- :nth-child(): failed
- :nth-last-child(): failed
- :first-of-type: failed
- :last-of-type: failed
- :only-of-type: failed
- :nth-of-type(): failed
- :nth-last-of-type(): failed
- :empty: failed
- :not(): failed
- :target: failed
- :enabled: failed
- :disabled: failed
- :checked: failed
- IE 7.0
- *
- E
- .class
- #id
- E F
- E > F
- E + F
- E[attribute] - empty values, and attributes without a value, like ’selected’ are not matched
- E[attribute=value]
- E[attribute~=value] - assumes attribute values are case sensitive: buggy
- E[attribute|=value] - assumes attribute values are case sensitive: buggy
- :first-child - comments and text nodes are not supposed to be considered children: buggy
- :link
- :visited
- :lang(): failed
- :before: failed
- ::before: failed
- :after: failed
- ::after: failed
- :first-letter
- ::first-letter: failed
- :first-line
- ::first-line: failed
- E[attribute^=value]: failed
- E[attribute$=value]: failed
- E[attribute*=value]: failed
- E ~ F
- :root: failed
- :last-child: failed
- :only-child: failed
- :nth-child(): failed
- :nth-last-child(): failed
- :first-of-type: failed
- :last-of-type: failed
- :only-of-type: failed
- :nth-of-type(): failed
- :nth-last-of-type(): failed
- :empty: failed
- :not(): failed
- :target: failed
- :enabled: failed
- :disabled: failed
- :checked: failed
- IE 6.0
- *
- E
- .class - .class1.class2 {} The both CSS selectors should match the HTML fragment, but the first should take precendence over the second because it is more specific. So the second should be able to define additional properties, but not overwrite properties from the first.
- #id
- E F
- E > F
- E + F
- E[attribute]: failed
- E[attribute=value]: failed
- E[attribute~=value]: failed
- E[attribute|=value]: failed
- :first-child: failed
- :link
- :visited
- :lang(): failed
- :before: failed
- ::before: failed
- :after: failed
- ::after: failed
- :first-letter
- ::first-letter
- :first-line
- ::first-line
- E[attribute^=value]: failed
- E[attribute$=value]: failed
- E[attribute*=value]: failed
- E ~ F: failed
- :root: failed
- :last-child: failed
- :only-child: failed
- :nth-child(): failed
- :nth-last-child(): failed
- :first-of-type: failed
- :last-of-type: failed
- :only-of-type: failed
- :nth-of-type(): failed
- :nth-last-of-type(): failed
- :empty: failed
- :not(): failed
- :target: failed
- :enabled: failed
- :disabled: failed
- :checked: failed
- OP 9.27
- *
- E
- .class
- #id
- E F
- E > F
- E + F
- E[attribute]
- E[attribute=value] - erroneously treats the = as a regex as match, so red would match reddish or tired
- E[attribute~=value]
- E[attribute|=value]
- :first-child
- :link
- :visited
- :lang() - if hyphen is missing, it will match. This should not be an issue
- :before
- ::before
- :after
- ::after
- :first-letter
- ::first-letter
- :first-line
- ::first-line
- E[attribute^=value]: failed
- E[attribute$=value]: failed
- E[attribute*=value]
- E ~ F
- :root
- :last-child: failed
- :only-child: failed
- :nth-child(): failed
- :nth-last-child(): failed
- :first-of-type: failed
- :last-of-type: failed
- :only-of-type: failed
- :nth-of-type(): failed
- :nth-last-of-type(): failed
- :empty: failed
- :not(): failed
- :target: failed
- :enabled
- :disabled
- :checked
- OP 9.1
- *
- E
- .class
- #id
- E F
- E > F
- E + F
- E[attribute]
- E[attribute=value] - erroneously treats the = as a regex as match, so red would match reddish or tired
- E[attribute~=value]
- E[attribute|=value]
- :first-child: buggy
- :link: failed
- :visited: failed
- :lang() - if hyphen is mission, it will match. This should not be an issue
- :before
- ::before
- :after
- ::after
- :first-letter
- ::first-letter
- :first-line
- ::first-line
- E[attribute^=value]: failed
- E[attribute$=value]: failed
- E[attribute*=value]
- E ~ F
- :root: failed
- :last-child: failed
- :only-child: failed
- :nth-child(): failed
- :nth-last-child(): failed
- :first-of-type: failed
- :last-of-type: failed
- :only-of-type: failed
- :nth-of-type(): failed
- :nth-last-of-type(): failed
- :empty: failed
- :not(): failed
- :target: failed
- :enabled
- :disabled
- :checked
- Saf 3.1
- *
- E
- .class
- #id
- E F
- E > F
- E + F
- E[attribute]
- E[attribute=value]
- E[attribute~=value]
- E[attribute|=value]
- :first-child
- :link
- :visited
- :lang()
- :before
- ::before
- :after
- ::after
- :first-letter
- ::first-letter
- :first-line
- ::first-line
- E[attribute^=value]
- E[attribute$=value]
- E[attribute*=value]
- 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
- SAF 3.0
- *
- E
- .class
- #id
- E F
- E > F
- E + F
- E[attribute]
- E[attribute=value] : buggy
- E[attribute~=value]: buggy
- E[attribute|=value]: buggy
- :first-child: buggy
- :link
- :visited
- :lang()
- :before
- ::before
- :after
- ::after
- :first-letter
- ::first-letter
- :first-line
- ::first-line
- E[attribute^=value]: buggy
- E[attribute$=value]: buggy
- E[attribute*=value]: buggy
- E ~ F
- :root
- :last-child: failed
- :only-child: failed
- :nth-child(): failed
- :nth-last-child(): failed
- :first-of-type: buggy
- :last-of-type: failed
- :only-of-type: failed
- :nth-of-type(): failed
- :nth-last-of-type(): failed
- :empty: failed
- :not()
- :target
- :enabled
- :disabled
- :checked
- Saf 3.0
- *
- E
- .class
- #id
- E F
- E > F
- E + F
- E[attribute]
- E[attribute=value]: buggy
- E[attribute~=value]: buggy
- E[attribute|=value]: buggy
- :first-child: buggy
- :link
- :visited
- :lang() - does not inherit, though it should
- :before
- ::before
- :after
- ::after
- :first-letter
- ::first-letter
- :first-line
- ::first-line
- E[attribute^=value]: buggy
- E[attribute$=value]: buggy
- E[attribute*=value]: buggy
- E ~ F
- :root
- :last-child: failed
- :only-child: failed
- :nth-child(): failed
- :nth-last-child(): failed
- :first-of-type: buggy
- :last-of-type: failed
- :only-of-type: failed
- :nth-of-type(): failed
- :nth-last-of-type(): failed
- :empty: failed
- :not()
- :target
- :enabled
- :disabled
- :checked
What exactly does the orange mean?
Good point, patrick. I wrote the text quickly, and need to elaborate. The orange means that the selector has some support but it’s quirky. On several of the orange boxes, if you hover over the box, it will actually explain the quirkiness.
I guess i spent all the time testing the browsers, and need to spend a little more time to make this entry accessible.
this needs to be in a PDF and excel file for people to dl and print. that would be nice.
Thanks a lot for this table. I just needed something like this.
Since this is tabular data, why do’nt use a table to show it?
easy to copy - paste in excel or another software to print.
If you look at the code, each list actually stands on it’s own. It’s crappy code, i must admit. But i can grab any of the lists to make a new article focusing on the support in any one browser. Pulling out the data from one column, on the other hand, is a PITA. I’ll soon make a pdf of this so it’s easier to print. If you hover over any box there is a good amount of info. Coding that in table format would have been hell.
But, i’ve added a pdf… so now you can print it. http://evotech.net/blog/pdfs/browsers.pdf
What DOCTYPE did you set in IE7?