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