CODEWITHSUNDEEP
csscss-selectors
Sean H Jenkins
Sean H Jenkins

Reputation: 1780

IE8 breaks when using two selectors?

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

Upvotes: 6

Views: 679

Answers (3)

My Head Hurts
My Head Hurts

Reputation: 37665

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.

Upvotes: 4

Gregg B
Gregg B

Reputation: 13727

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

Upvotes: 12

Different55
Different55

Reputation: 597

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%;}

Upvotes: 2

Related Questions