Search code examples
javascriptjqueryhtmlcssselectivizr

Make first-child and last-child work in IE8

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

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