How to use :nth-last-child in IE8?

Question

I have this CSS below, but it doesn't work on IE8. I know that CSS3 doesn't work on IE8.

I would like to try something like div:first-child + div + div but it doesn't work. I think it doesn't work because of nth-last-child(). I can't translate nth-last-child() with adjacent sibling combinator (+).

/* one item */
div:nth-child(1):nth-last-child(1) {
width: 100%;
}

/* two items */
div:nth-child(1):nth-last-child(2),
div:nth-child(2):nth-last-child(1) {
width: 50%;
}

/* four items */
div:nth-child(1):nth-last-child(4),
div:nth-child(2):nth-last-child(3),
div:nth-child(3):nth-last-child(2),
div:nth-child(4):nth-last-child(1) {
width: 25%;
}

see the second answer in this: http://stackoverflow.com/questions/8733475/alternative-for-nth-child-for-older-ie-browsers — Pete, Jun 05 '14 at 11:51
IE8 does support `:first-child` though. [link](https://developer.mozilla.org/en/docs/Web/CSS/:first-child) — Mr_Green, Jun 05 '14 at 11:53

score 1 · Accepted Answer · answered Jun 05 '14 at 12:02

1

CSS-only solution not possible, you are dealing with browsers that are way too old. On the upside, you don't need your own script as Selectivzr does just this, or alternatively the all-in-one solution that is IE9.js (fixes a ton of other IE bugs, not just add new selectors).

answered Jun 05 '14 at 12:02

Alex Wilson

2,421
11
13

I am very pleased )))) – Alex Wilson Jun 05 '14 at 12:50

How to use :nth-last-child in IE8?

1 Answers1