first-child on row with attached class?

Question

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

If you're talking about row, `tr`. – emerson.marini Dec 06 '13 at 15:46 — emerson.marini, Dec 06 '13 at 15:46

score 1 · Answer 1 · answered Dec 06 '13 at 15:47

1

You place it at the end of the tr selector:

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

answered Dec 06 '13 at 15:47

jazZRo

1,598
1
14
18

I thought it would be this too and I've tried it but it's not working for some strange reason. – David James Ball Dec 06 '13 at 16:08
It won't select the first tr with the class my-style if it is the second tr in the table. In other words, it will only select the first tr in the table and only if it contains the class my-style. – jazZRo Dec 06 '13 at 16:12

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

The :first-child pseudo-class represents the very first child of its parent. Try the sibling selector(~) instead.

/*default*/
td{border:1px solid #333}

/*style of first element*/
tr.my-style td.my-style-2{
  border-top: 1px solid #F00;
}

/*style for all the rest*/
td.my-style-2 ~ td.my-style-2 {
  border-top:1px solid #333;
}

JSFiddle example

Please check this answer from Lea Verou about a similar question: https://stackoverflow.com/a/5293095/935077

edited May 23 '17 at 10:25

Community

1
1

answered Dec 06 '13 at 16:32

Laszlo

2,225
19
22

You can combine `:first-child` with other selectors - they just won't change its meaning. – BoltClock Dec 06 '13 at 16:33

first-child on row with attached class?

2 Answers2