IE8 breaks when using two selectors?

Question

I am drawing a table using CSS and I realized that IE8 does not support :nth-child

So, before I added IE8 support, css looked like this

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

Then I added another selector like

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

IE8 doesn't like it, it doesn't recognize the second selector, but if I select the first one as shown below, it works

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

Any ideas how to fix this?

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

Answer 1

I would try to make the style separately (without a comma). IE8 probably doesn't recognize: the nth child and skips the declaration.

Answer 2

If you still need the nth-child(1) style to work in IE8 (without adding the .datecol class), you can change your CSS to the following:

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

The above code will target the second td - this is what I assume you are trying to do with nth-child(1) and supports a wider range of browsers.

Answer 3

I feel that something is missing here. Can't you split them into two different lines?

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