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
I would try making the style separately (without the comma). IE8 is probably not recognizing the :nth child and skipping the declaration.
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.
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%;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With