Set css style only in the first row of the table

Question

How to access the first row of a CSS table with a different class name tr .

 <div id="right"> <table> <tbody> <tr class="head"> <td >Date</td><td>Info</td><td>More</td> </tr> <tr><td>...</td></tr></table> </div> 

How to make this css

 #right table tr:first-child td:first-child { border-top-left-radius: 10px; } #right table tr:first-child td:last-child { border-top-right-radius: 10px; } 

applies only to .head

Answer 1

 #right .head td:first-child{ border-top-left-radius: 10px; } #right .head td:last-child { border-top-right-radius: 10px; } 

Answer 2

You can do it further.

 #right tr:first-child td:first-child { background-color: red; } 

Select the first tr and then the first td.

Answer 3

use the :first-child pseudo :first-child to get the first element.

how

 #right .head td:first-child { border-top-left-radius: 10px; } #right .head td:last-child { border-top-right-radius: 10px; } 

Answer 4

 #right table tr.head td:first-child { border-top-left-radius: 10px; } #right table tr.head td:last-child { border-top-right-radius: 10px; }