html - first-child on row with attached class?

I have a css rule...

tr.my-style td.my-style-2
{
  border-top: 1px solid #F00;
}

This gives a red border to every data-cell, in every row in my table. 'my-style' and 'my-style-2' are attached to the html from a generated component.

Where do I place the first-child selector in the rule to only apply the style to the first row in my table?

Here is my actual css using 'get css path' in FireFox...

html.js body div.container div.row div.col-md-9 table#Accounts.dxgvControl_Bootstrap3 tbody tr td table#Accounts_DXMainTable.dxgvTable_Bootstrap3 tbody tr#Accounts_DXDataRow0.dxgvDataRow_Bootstrap3 td.dxgv

But '#Accounts_DXDataRow0' refers to the first row. I want to generalise the rule without using hardcoded identifiers.

I tried...

tr.dxgvDataRow_Bootstrap3:first-child td.dxgv
{
border-top: 2px solid #DDDDDD;
}