first-child and last-child with IE8

Question

I have some css for adjusting things in my table.

Here it is:

.editor td:first-child
{
    width: 150px; 
}

.editor td:last-child input,
.editor td:last-child textarea
{
    width: 500px;
    padding: 3px 5px 5px 5px;
    border: 1px solid #CCC; 
}

It works with Firefox, Safari and Chrome but not (at this time) with IE8.

I know the problem comes from the first-child and last-child but I'm not an expert.

Any idea how I can fixt it?

PS: I added <!doctype html> on top of my html document but nothing changed.

IE8 does not support `:last-child` (although I believe it does support `:first-child`, as that was in the CSS 2.1 spec, whereas `:last-child` was in CSS 3). — James Allardice, Jan 12 '12 at 19:08
Maybe we can trick by selecting all others td than :first-child ? Any idea? So we can get both selections...? — Bronzato, Jan 12 '12 at 19:13
@Bronzato: "all other than :first-child" is not the same as ":last-child", unless your table only has two columns. — BoltClock, Jan 12 '12 at 19:14

score 68 · Accepted Answer · edited May 23 '17 at 12:00

68

If your table is only 2 columns across, you can easily reach the second td with the adjacent sibling selector, which IE8 does support along with :first-child:

.editor td:first-child
{
    width: 150px; 
}

.editor td:first-child + td input,
.editor td:first-child + td textarea
{
    width: 500px;
    padding: 3px 5px 5px 5px;
    border: 1px solid #CCC; 
}

Otherwise, you'll have to use a JS selector library like jQuery, or manually add a class to the last td, as suggested by James Allardice.

edited May 23 '17 at 12:00

Community

1
1

answered Jan 12 '12 at 19:18

BoltClock

700,868
160
1,392
1,356

Nice one... never thought of that! – James Allardice Jan 12 '12 at 19:23
2

+1 great solution. thank you. ( `except myne is .rowClose > td+td+td+td+td+td+td` ) http://i.stack.imgur.com/08jym.jpg – Royi Namir Mar 17 '13 at 16:49
1

Gamn you IE8. Looks like there's no other way, so let's create a thousand class="last_child". – Rafael Barros Jan 07 '14 at 18:03

score 34 · Answer 2 · edited Jan 13 '12 at 08:10

34

Since :last-child is a CSS3 pseudo-class, it is not supported in IE8. I believe :first-child is supported, as it's defined in the CSS2.1 specification.

One possible solution is to simply give the last child a class name and style that class.

Another would be to use JavaScript. jQuery makes this particularly easy as it provides a :last-child pseudo-class which should work in IE8. Unfortunately, that could result in a flash of unstyled content while the DOM loads.

edited Jan 13 '12 at 08:10

BoltClock

700,868
160
1,392
1,356

answered Jan 12 '12 at 19:13

James Allardice

164,175
21
332
312

4

jQ does work nicely, just have to add to my global .js `$(".bordTL th:last-child").css("border-right","1px solid black");` It is a small clean up so being delayed a second isn't egregious. – gordon Mar 07 '14 at 14:29
1

Just saw `$("#nav li:last-child").addClass('last-child')` (thank you jason http://stackoverflow.com/questions/1293369/using-last-child-in-css) – gordon Mar 07 '14 at 14:42

blues_driven · Answer 3 · 2015-12-02T08:22:26.050

3

If you want to carry on using CSS3 selectors but need to support older browsers I would suggest using a polyfill such as Selectivizr.js

edited Dec 02 '15 at 08:22

answered Apr 04 '14 at 12:58

blues_driven

331
2
7

first-child and last-child with IE8

3 Answers3

Linked

Related