css ie8 first-child & last-child

Question

Hello guys i have the following..

.selected2:first-child{
   background: url(../img/css/first-selected.png) no-repeat !important;
   background-position: center center !important;
   box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}
.selected2{
   background: url(../img/css/second-selected.png) no-repeat !important;
   background-position: center center !important;
   box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}
.selected2:last-child{
   background: url(../img/css/third-selected.png) no-repeat !important;
   background-position: center center !important;
   box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}

it works perfect in ie9, chrome, opera, firefox... but in ie8 i get only the second background on every li element.

What is the problem? ie8 does not support first-child?

Question is a duplicate of http://stackoverflow.com/questions/7938521/browser-support-for-css-first-child-and-last-child — Maria Ioannidou, Mar 22 '13 at 15:16
better answer will give this site http://quirksmode.org/css/selectors/ — Arpit Srivastava, Mar 22 '13 at 15:17
A quick google search would answer your question. NO. Only `:first-child` is somewhat compatible to IE8. See here: http://www.quirksmode.org/css/selectors/ — otinanai, Mar 22 '13 at 15:20

Spudley · Accepted Answer · 2013-03-22T16:15:48.747

You have two issues here: Firstly the :last-child selector, and secondly the RGBA background colours.

IE8 does not support :last-child. (It does support :first-child though)

You can see the browser support for these (and all other CSS selectors) at Quirksmode.org.

The quickest and easiest way to deal with this if you need IE8 support is simply to add classes to the relevant elements and style them that way instead. It's the old-school way of doing things, but then IE8 is something of an old-school browser.

If you really need to use selectors like :last-child, and you really need to support IE8, there are Javascript solutions you could try:
- http://selectivizr.com/ -- this is a JS library that adds support for a bunch of CSS selectors to old IE versions. It requires you to also use another lib such as jQuery that it uses to do the hard work.
- https://code.google.com/p/ie7-js/ -- this is a JS library that tries to patch old IE versions to fix as many of the bugs and quirks as possible and back-fill as many missing features as possible. It's pretty wide-ranging in what it does. It does include most of the advanced CSS features.
Either of these libraries should do the trick for you to add :last-child support, unless you have users with JS turned off.
However as I said, IE8 does support :first-child, so missing selectors isn't the reason for your code not working in this case. The reason your CSS isn't working for :first-child is because you're using an RGBA colour for the background. IE8 doesn't support RGBA colours.

For this, the only solution available is a JS library called CSS3Pie. This adds various CSS3 features to IE6/7/8, including RGBA colour support (albeit to a limited extent; it doesn't do everything).

you can use an IE filter gradients to get rgba working. have a look at http://css-tricks.com/rgba-browser-support/ — Dogoku, Apr 11 '14 at 15:19

score 1 · Answer 2 · answered Mar 22 '13 at 15:19

IE8 and lower don't support those pseudo classes. There is a Javascript tool that makes IE7 and IE8 behave closer to IE9 and adds support for first and last childs.

https://code.google.com/p/ie7-js/

In the downloaded file, you will find IE7.js IE8.js and IE9.js just use the IE9.js it includes the other two...

score 1 · Answer 3 · edited Aug 12 '13 at 08:28

1

As previously mentioned, you can't use the :last-child pseudo-class, but you could do .selected2 + .selected2 etc. to target the one you need.

edited Aug 12 '13 at 08:28

Cody Gray - on strike

239,200
50
490
574

answered Aug 12 '13 at 08:07

James

157
13

css ie8 first-child & last-child

3 Answers3