CSS selector for all table columns greater than nth-of-type(2)?

Question

My current CSS selects the 2nd column:

tr td:nth-of-type(2) {
  padding-left:20px;
  width:100px;
  background-color:yellow;
}

How can I target all columns after the 2nd?

Answer 1

You could use:

tr td:nth-of-type(2) ~ td

The ~ (general sibling selector) will select all <td> sibling elements after the second one.

Note though that nth-of-type isn't supported in older versions of IE (8 and before).

Alternatively, you could use td:nth-child(n+3) - again this isn't supported in IE8 and before, but if you wanted to use nth-child (not just for this one case obviously) and happen to be using a JavaScript library such as jQuery, there is always Selectivizr, which will make it (and various other selectors) work in IE6 through to IE8.

Answer 2

this will work...

tr td:nth-of-type(n+3)
{
    padding-left:20px;
    width:100px;
    background-color:yellow;
}

similar question link

Answer 3

td + td + td {

}

Will match the third columns and all columns afterward. This is CSS2 and does not require the "nth-of-type" property - which is not supported in legacy browsers like the browser (IE7) I am using now!