Available CSS selectors when you drop IE.x
With the number of legacy Internet Explorer (IE) users decreasing, largely thanks to Google Chrome, “support” for older versions such as IE6, IE7 and even IE8 is dropping too meaning better support for newer CSS selectors.
Typically “support” means serving a gracefully degraded experience that is still functional but with limited CSS3 and JavaScript niceties. What the user gets is down to their browsers capabilities.
Depending on a websites visitor stats, I tend to server a plain-text version ensuring functionality is available but with very basic styling. This is normally for anything that doesn’t support media-queries, except IE8 which I polyfil… for now. This means I spend less time fixing issues with old browsers and can spend more time focusing on improving the experience for the majority of users.
With all of that in mind, I thought it would be good to summarize what CSS selectors are available to use when you drop or degrade “support” for older browsers.
I doubt many people are dropping IE9 yet so I will start from there and revisit this in a decade or so…
Available in IE9+
:notNegation of a selector.:emptyEmpty elements.:first-of-typeThe first element of its type.:last-childAn element that is the last child of its parent:last-of-typeThe last element of its type.:nth-child():nth-last-child():nth-last-of-type():nth-of-type()Select elements according to a formula.:only-childAn element that is the only child of its parent.:only-of-typeThe only element of its type.:rootThe root element, or initial containing block.:checkedChecked elements (checkboxes or radios):disabledDisabled form fields:enabledNon-disabled form fields
Available in IE8+
:before and :afterTo generate content before and after an element.:first-child(limited support) An element that is the first child of its parent.:focusForm fields that have the keyboard focus
Available in IE7+
> selectorSelects an element that is a child of another element.~ selectorSelects an element that is a general next sibling of another element.+ selector(limited support) Selects an element that is a next sibling of another element.[attr]Selects an element with a certain attribute.[attr=value]Selects an element with a certain attribute value.[attr~=value]Selects an element with an attribute that includes a certain value; space-separated.[attr^=value]Selects an element with a certain attribute that starts with a certain value.[attr$=value]Selects an element with a certain attribute that ends with a certain value.[attr*=value]Selects an element with a certain attribute that contains a certain value; not necessarily space-separated.
A huge thanks goes to quirksmode.org for doing all the legwork testing these selectors and their browser compatibility. If there isn’t one already, I would love to create a handy cheat sheet to reference but for now this post will have to suffice.