Question

I have a table with multiple tbody’s, each of which has a classed row, and I want it so that the classed row in the first tbody has style differences, but am unable to get tbody:first-child to work in any browser. Perhaps I am missing something, or maybe there is a workaround.

Ideally, I would like to provide the programmers with a single tbody section they can use as a template, but will otherwise have to add a class to the first tbody, making for an extra test in the programming.

The html is straightforward:

<tbody class="subGroup">
    <tr class="subGroupHeader">
        <th colspan="8">All Grades: Special Education</th>
        <td class="grid" colspan="2"><!-- contains AMO line --></td>
        <td><!-- right 100 --></td>
    </tr>
    <tr>...</tr> <!-- several more rows of data -->
</tbody>

There are several tbody’s per table. I want to style the th and td’s within tr.subGroupHeader in the very first tbody differently than the rest. Just to illustrate, I want to add a border-top to the tr.subGroupHeader cells.

The tr.subGroupHeader will be styled with a border-top, such as:

table.databargraph.continued tr.subGroupHeader th, table.databargraph.continued  tr.subGroupHeader td {
    border-top: 6px solid red;
}

For the first tbody, I am trying:

table.databargraph.continued tbody:first-child tr.subGroupHeader th {
    border-top: 6px solid blue ;
}

However, this doesn’t seem to work in any browser (I’ve tested in Safari, Opera, Firefox, and PrinceXML, all on my Mac)

Curiously, the usually excellent Xyle Scope tool indicates that the blue border should be taking precedence, though it obviously is not. See the screenshot at http://s3.amazonaws.com/ember/kUD8DHrz06xowTBK3qpB2biPJrLWTZCP_o.png

This screenshot shows (top left) the American Indian th is selected, and (bottom right), shows (via black instead of gray text for the css declaration), that, indeed, the blue border should be given precedence. Yet the border is red.

I may be missing something fundamental, like pseudo-classes not working for tbodys at all… This really only needs to work in PrinceXML, and maybe Safari so I can see what I’m doing with webkit-based css tools.

Note I did try a selector like tr.subGroupHeader:first-child, but such tr’s apparently consider the tbody the parent (as I would suspect), thus made every border blue.

Thanks…

Answer 1

Sorry folks, but I’m gonna answer my own question. But I do appreciate the help.

Instead of:

table.databargraph.continued tbody:first-child tr.subGroupHeader th {
    border-top: 6px solid blue ;
}

What I should have done was:

table.databargraph.continued > tbody:first-of-type tr.subGroupHeader th {
    border-top: 2px solid blue !important ; 
}