Apply css properties on only first tr of parent table (using only css classes, no usage of id's)

Question

<table>
  <thead>
  </thead>
  <tbody class="someclass">
    <tr>
      <td>
      </td>
      <td>
        <table>
          <tbody>
            <tr>
              <td>.....</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

The code snippet above here I want to style first tr of parent table with someclass like:

.someclass tr td{
.......
......
}

but it is getting applied to inner table also.

Possible duplicate of : http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class — Weenesta - Mathieu Dormeval, Mar 24 '17 at 08:29

score 2 · Accepted Answer · answered Mar 24 '17 at 08:53

2

I liked Gosi's answer about applying 'first-of-type' to your css. But then I read the comments and realised, so thought I'd follow up with this:

Try:

.someclass tr:first-of-type {
background: blue;
}

As per Gosi's answer, then also add this:

.someclass tr table tr:first-of-type {
background: none;
}

answered Mar 24 '17 at 08:53

jock.perkins

469
6
23

.someclass tr table tbody>tr :first-of-type {.....} this gets working – pod Mar 24 '17 at 08:55
Yeah something like that, and then like in my answer, overwrite the styles for the deeper trs later in your css. – jock.perkins Mar 24 '17 at 08:56

Super User · Answer 2 · 2017-03-24T09:00:05.540

0

You can use following css for this

.someclass > tr {
    // your css here
}

Or

.someclass > tr:first-child {
    // your css here
}

or

.someclass tr:first-of-type {
    // your css here
}

edited Mar 24 '17 at 09:00

answered Mar 24 '17 at 08:37

Super User

9,448
3
31
47

it gets applied to inner table tr also and i want only on parent table tr – pod Mar 24 '17 at 08:46

Apply css properties on only first tr of parent table (using only css classes, no usage of id's)

2 Answers2