Make first-child and last-child work in IE8

Question

In my project, I am trying to make the below css work in IE8 using selectivizr

thead>tr:first-child>th:last-child {
    color: red;
}
tbody>tr:first-child>td:last-child {
    color: red;
}

---

As described in Selectivizr website, I added the below code in "External Resources" of JSFiddle.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="https://github.com/keithclark/selectivizr/blob/master/selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

Still I can't make first-child and last-child pseudo selectors work in IE8.

I am switching all the versions of IE into IE8 using the following code. (just for information).

<meta http-equiv="X-UA-Compatible" content="IE=8" >

Answer 1

I ended up doing the following as I have fixed columns

thead>tr:first-child>th:first-child+th+th+th {
    color: red;
}
tbody>tr:first-child>td:first-child+td+td+td {
    color: red;
}

I did the above as first-child supports IE8 but not last-child.

It is working properly in IE8.

Source

Anyway, I still don't know how to use selectivizr in project.

Answer 2

This selectors does not support in IE8, so you can assign id or special class to first and last elements. For example:

<tr class="thisSection">
     <td class="customClass firstTD">1</td>
     <td class="customClass">2</td>
     <td class="customClass">3</td>
     <td class="customClass lastTD">4</td>
</tr>