Apply style to a specific table column – using minimal markup

If you wish to apply a certain CSS style to, say, all rows in the 4th column of a table, you might think assigning a class name to each <td> in that row is the only approach.

HTML

<table>
<tr>
  <td>Col 1 value</td>
  <td>Col 2 value</td>
  <td>Col 3 value</td>
  <td class="emphasize">Col 4 value - this will be bold and italic</td>
  <td>Col 5 value</td>
</tr>
</table>


CSS

table tr td.emphasize { font-weight: bold; font-style: italic; }


If you only have a few table rows, the additional class attribute has minimal impact. But, consider the additional HTML code size when you have 200 table rows. This extra class attribute adds over 2Kb to your page!

Using the CSS sibling selector, you can achieve the same result, without the class attribute:

table tr td + td + td + td { font-weight: bold; font-style: italic; }