selectors.md

feature: selectors status: use tags: fallback gtie6 kind: css polyfillurls:

Most CSS Selectors are supported from IE7 onwards, so you should be safe to use them. But do note that, on browsers that do not support these selectors, a whole rule will be detected as invalid if these unsupported selectors are present. For example, in IE6 #main, p:first-child {} would be invalid because it is unable to understand p:first-child. We strongly recommend you do not try to polyfill this, but if you do need one, you can use Selectivizr.

When you sunset IE6 support, you can use:

• tr > td : Immediate descendant (child) selector.
• dt + dd : next sibling selector*
• dt ~ dd : any following sibling
• div[attr] and img[src$=png] : Attribute selector (starts with, ends with, contains).
• p:first-child*
• div:hover and :hover state on all non-<a>'s
• li.food.vegetable : without worrying about the chained classes bug

* IE7-8 don't update styles properly when elements are manipulated with JS. Usually you have to force the browser to redraw (e.g. hide and show parent element).

When you sunset IE7 support, you can use:

• :before, :after and generated content
• :focus for elements with current focus

When you sunset IE8 support, you can use:

• These very useful selectors: :nth-child(n), :last-child, :target, :not(s), :enabled, :disabled, :checked, ::selection
• These ones, too: :root, :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), :first-of-type, :last-of-type, :only-child, :only-of-type, :empty