Заставьте первого и последнего ребенка работать в IE8

Question

В моем проекте я пытаюсь заставить работать css ниже в IE8, используя selectivizr

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

---

Как описано на веб-сайте http://selectivizr.com/, я добавил следующий код в "Внешние ресурсы" 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]-->

Тем не менее я не могу сделать first-child а также last-child псевдо-селекторы работают в IE8.

Я переключаю все версии IE в IE8, используя следующий код. (только для информации).

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

Answer 1

Я закончил тем, что сделал следующее, поскольку я установил столбцы

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

Я сделал выше, как first-child поддерживает IE8, но не last-child,

Он работает правильно в IE8.

Источник

Во всяком случае, я до сих пор не знаю, как использовать selectivizr в проекте.

Answer 2

Этот селектор не поддерживается в IE8, поэтому вы можете назначить идентификатор или специальный класс первым и последним элементам. Например:

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