Apply style to first row cells

Question

It should be very simple, but I can’t understand.

I have a table like this:

<table class="category_table"> <tr><td> blabla 1</td><td> blabla 2 </td></tr> <tr><td> blabla 3 </td><td> blabla 4 </td></tr> </table> 

I want the td tags of the first line tr have vertical-align . But not the second line.

 .category_table td{ vertical-align:top; } 

Answer 1

Use tr:first-child to carry the first tr :

 .category_table tr:first-child td { vertical-align: top; } 

If you have nested tables and don’t want to apply styles to the inner rows, add some child selectors so that only the top td level on the first top level tr will get the styles:

 .category_table > tbody > tr:first-child > td { vertical-align: top; } 

Answer 2

This should do the job:

 .category_table tr:first-child td { vertical-align: top; } 

Answer 3

Below is the first table tr table under thead

 table thead tr:first-child { background: #f2f2f2; } 

And this works for the first tr of thead and tbody both:

 table thead tbody tr:first-child { background: #f2f2f2; }