CSS selector for last visible column of a grid

Question

I have a column like this:

<table class="mytable">
  <tr>
    <th></th>
    <th></th>
    <th style="display:none"></th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td style="display:none"></td>
  </tr>
</table>

What is the CSS selector to apply a custom style on the last visible column (th and td), in this case, the second one?

I'm confused with pseudo classes/pseudo elements...

This isn't *currently* possible in pure CSS.. if you were to use jQuery, this would work: `$('th:not(:visible), td:not(:visible)').prev().css('background','red');`. Example here: http://jsfiddle.net/NHF2E/ — Josh Crozier, Mar 06 '14 at 01:11
Pseudo-classes and pseudo-elements, for one, are different things. See http://stackoverflow.com/questions/8069973/what-is-the-difference-between-a-pseudo-class-and-a-pseudo-element-in-css — BoltClock, Mar 06 '14 at 11:56

score 1 · Answer 1 · answered Mar 06 '14 at 01:19

For the very last one:

td:last-child , th:last-child { ... }

But as noted in your comments, this cannot take inline styles into account. Another thing you can do is nth-child:

td:nth-child(1) , th:nth-child(1) { ... }

But this presupposes you will keep the same number of columns. If neither of these is suitable you're better off just assigning a class to your next-to-last column cells.

CSS selector for last visible column of a grid

1 Answers1