Browser CSS Selector Support

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

Download .pdf

This entry was posted in Browsers, CSS (including hacks), Web Development. Bookmark the permalink.

10 Responses to Browser CSS Selector Support

  1. Patrick says:

    What exactly does the orange mean?

  2. estellevw says:

    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.

  3. David Sparks says:

    this needs to be in a PDF and excel file for people to dl and print. that would be nice.

  4. Zahon says:

    Thanks a lot for this table. I just needed something like this.

  5. Ezequias says:

    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.

  6. admin says:

    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

  7. Wayne says:

    What DOCTYPE did you set in IE7?

  8. Hlusta says:

    Well, now I have tested the followings:
    img[alt=”sometext”]
    and it works pretty well in MSIE 7.

    And now let’s try something else:
    img[width=”675″]

    Oops! It does not work at all! Of course, the Firefox and other good browsers are OK with this.

    Version of my MSIE is: 7.0.6001.18000 (on Windows Vista Ultimate Edition).

    Huh, it took some much time to try another attribute :(. Any comment on this issue? Does only my Explorer quirk? Or the “green” in the table is wrong?

  9. Hlusta says:

    Maybe some example would be useful. Here it is:
    http://tmp.dynweb.cz/pseudo/

    Thanks for comments.
    Hlusta

  10. kimblim.dk says:

    I’ve made something along these lines over at http://kimblim.dk/css-tests/selectors/ which also has examples of every single one in use.

    Oh, and we have to disagree on Safari passing all tests, as it definently has some issues with :empty…

Leave a Reply

Your email address will not be published. Required fields are marked *