xperator xperator - 3 months ago 7
CSS Question

CSS - Apply style to cells of first row

It should be very simple but I can't figure it out.

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 to make
td
tags of first
tr
row have
vertical-align
. But not the second row.

.category_table td{
vertical-align:top;
}

Answer

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

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

If you have nested tables, and you don't want to apply styles to the inner rows, add some child selectors so only the top-level tds in the first top-level tr get the styles:

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