Menu
I want to give a zebra stripe effect to my table rows. In all other browsers it can be done using CSS nth child element. But i want to do it IE 8 also. SO how can i do it?
782
Definition and UsageThe :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
The :nth-child() is a CSS pseudo-class selector that allows you to select elements based on their index (source order) inside their container. You can pass in a positive number as an argument to :nth-child() , which will select the one element whose index inside its parent matches the argument of :nth-child() .
Writing Complex :nth-child() SelectorsIt works exactly the same as :nth-child except that it starts from the end of the parent. For example, you can select the first three children of a parent by using the selector :nth-child(-n + 3) . You can use :nth-last-child(-n + 3) to select the last three.
With polyfill : Selectivizr is good enough.
Without polyfill: As IE8 supports first-child you can trick this to support nth-child in iE8 i.e
/*li:nth-child(2)*/ li:first-child + li {}/*Works for IE8*/ Although we cannot emulate complex selectors i.e nth-child(2n+1) or nth-child(odd) for IE8.
73
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
