如何用CSS选择除IE7 / 8的最后一个单元格以外的所有单元格？

Question

I'm trying to fit some CSS to also work on IE7 and IE8 and I'm stuck with the :not() selector.

I need to select all table header cells except the last one. I'm currently using this:

 th:not(:last-child)

which fails on IE7+8.

Are there any CSS only workarounds?

Thanks for some hints!

Answer 1

The way you ask it:

all table header cells except the last one

could refer to:

• the last th of the table, wherever it could be found,
• the last element of a row (presumably the last one of thead>tr - and there could be more than one tr there),
• the last th in each row.

None of these cases can be solved by CSS understood by IE7/8 (resp. no solution in CSS at all, th:last-child and th:last-of-type )

EDIT: in one case, there could be a solution. If you exactly know how many th elements there are in each row then you can select say the fourth one with th ~ th ~ th ~ th .
See http://reference.sitepoint.com/css/generalsiblingselector for IE7/8 bugs (no comment allowed).
It's up to you to modify this selector if there are only th in a row (the + selector would be OK too) or if there are @colspan or @rowspan attributes (number of elements in a row != number of columns).

Answer 2

I solved it only by adding extra class for last elements in code generator. No tool for IE8,7 and older.

Answer 3

You can't do it with pure css . You can give class to your last th in your HTML or you can use selectivizr JavaScript for this. Selectivizr support all css3 & css2 selectors for IE older version