CODEWITHSUNDEEP
htmlcss
Rokas Paškevičius
Rokas Paškevičius

Reputation: 107

Set css style only to first row of the table

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

<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;
}

to apply only to .head

Upvotes: 4

Views: 15569

Answers (4)

Irfan TahirKheli
Irfan TahirKheli

Reputation: 3662

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

Upvotes: 0

Daniel
Daniel

Reputation: 2014

You can take it further by doing.

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

Selecting the first tr and then the first td.

Upvotes: 1

Ganesh Pandhere
Ganesh Pandhere

Reputation: 1652

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

Upvotes: 4

q0re
q0re

Reputation: 1359

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

Like:

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

Upvotes: 0

Related Questions