[CSS] Select First Column of Table


See the demo below. The first column is selected and styled.

(1,1) (1,2) (1,3) (1,4)
(2,1) (2,2) (2,3) (2,4)
(3,1) (3,2) (3,3) (3,4)

HTML:

<table class="first-column">
 <tbody>
  <tr>
    <td>(1,1)</td>
    <td>(1,2)</td>
    <td>(1,3)</td>
    <td>(1,4)</td>
  </tr>
  <tr>
    <td>(2,1)</td>
    <td>(2,2)</td>
    <td>(2,3)</td>
    <td>(2,4)</td>
  </tr>
  <tr>
    <td>(3,1)</td>
    <td>(3,2)</td>
    <td>(3,3)</td>
    <td>(3,4)</td>
  </tr>
 </tbody>
</table>

CSS:

table.first-column > tbody > tr > td:nth-of-type(1) {
  font-size: larger;
  color: red;
}

We use nth-of-type CSS selector to select the first td of rach row. If you want to select n-th column, change the number from 1 to n.

You may also be interested in [CSS] Select First Row of Table


Tested on: Chromium Version 56.0.2924.76 Built on Ubuntu , running on Ubuntu 16.10 (64-bit)