IE8 breaks when using two selectors?

Question

I'm styling a table using CSS and I realised that IE8 doesn't support :nth-child

So before I added support for IE8, the css looked like so

.my-comments table.comments-list tr td:nth-child(1){width:18%;}

Then I added another selector like so

.my-comments table.comments-list tr td:nth-child(1), .my-comments table.comments-list tr .datecol{width:18%;}

IE8 doesn't like this, it wont recognise the 2nd selector but if I take out the first one like below then it works

.my-comments table.comments-list tr .datecol{width:18%;}

Any ideas how to fix this?

Obviously I could just use the above code but I'd like to leave in both selectors for future browsers

Answer 1

I would try making the style separately (without the comma). IE8 is probably not recognizing the :nth child and skipping the declaration.

Answer 2

If you would still like your nth-child(1) style to work in IE8 (with out having to add the .datecol class) you could change your CSS to the following:

.my-comments table.comments-list tr td:first-child + td {
    width:18%;
}

The above code would target the second td - which is what I believe you are aiming to do with nth-child(1) and is support across a wider range of browsers.

Answer 3

I feel like I'm missing something here. Can't you just separate them into 2 different lines?

.my-comments table.comments-list tr td:nth-child(1){width:18%;}
.my-comments table.comments-list tr .datecol{width:18%;}