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

It looks like [`last-child`](http://msdn.microsoft.com/en-us/library/jj127328%28v=vs.85%29.aspx) is implemented in IE>=9, hence it breaks the whole rule where it's included. — Teemu, Jun 11 '13 at 07:10
@Teemu I am including the above selectivizr script only to IE8< using conditional css. — Mr_Green, Jun 11 '13 at 07:11
Right now I have two doubts in my mind. **1**) whether I included the script tags correctly in jsfiddle? **2**) what should be inside `[fallback css]`? — Mr_Green, Jun 11 '13 at 07:13
you can delete the fallback. It's for when JS is disabled in the browser. Your accepted answer is not an answer to this question: why selectivizr doesn not work with jQuery 1.10.x ? You should make that clear because i came here searching for this problem and the accepted answer is not an answer to your own question. — ProblemsOfSumit, Aug 07 '13 at 13:43

score 2 · Answer 1 · answered Jun 11 '13 at 07:21

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>

answered Jun 11 '13 at 07:21

Any Mitchel

183
2
9

Sorry, I can't go with an alternative. I am in a state that I need to make those pseudo selectors work properly in IE8. even if I need to include JS libraries. This is not at all option for me in my current project. – Mr_Green Jun 11 '13 at 07:23
@Mr_Green Why do you ***need*** to have these pseudo-selectors working in IE8? Why can't you use JavaScript to add these classes for for last child elements? – My Head Hurts Jun 11 '13 at 07:39
@MyHeadHurts I can't add code dynamically. though I can include libraries. It is very big project and adding code dynamically will be too much risky. Anyway, I solved it going through one of Boltclock's solution. – Mr_Green Jun 11 '13 at 07:45

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 11 '13 at 07:43

Mr_Green

40,727
45
159
271

Make first-child and last-child work in IE8

2 Answers2