CSS: How to target a specific cell within a table?

Question

I have a dynamically generated table, and I need to change the fifth cell from the first row of this table differently.

I can style the first line with:

//table.css .mytable tbody tr:first-child { whatever styles I define.. } 

Or the 5th column through:

 .mytable tbody td:nth-child(5) { whatever styles I define.. } 

I tried to combine these two selectors so that the cell in the first row, the fifth column was different, but to no avail. How can I achieve this?

Answer 1

You can just use the selector below

Demo

Demo 2 (several lines)

 .mytable tbody tr:first-child td:nth-child(5) { /* Styles goes here */ } 

Explanation: The above selector selects the 5 td element that is nested in the 1 tr element, which is further nested in the tbody , which is further nested in ANY element that has the .mytable class, but obviously tbody can be used inside the table , but if you want to do its specific, you can change this .mytable to table.mytable

Or you can use

 .mytable tbody tr:nth-child(1) td:nth-child(5) { /* Styles goes here */ } 

Explanation: Same as above using nth instead of first-child