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

Question

I have a dynamically generated table and I need to style differently the 5th cell from the first row of that table.

I´m able to style the first row via:

//table.css

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

Or the 5th column via:

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

I tried to combine this two selectors so that the cell in the 1st row, 5th column is different but without success. How can I achieve this?

Answer 1

You can simply use the below selector

Demo

Demo 2 (Multiple Rows)

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

Explanation : The above selector selects 5th td element which is nested under 1st tr element which is further nested under tbody which is further nested under ANY element having class .mytable but obviously, tbody will be used inside a table but if you want to make it 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