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%;
}
Was it helpful?

Solution

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).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top