ansaurus

Question

Trying to style the first tbody different than others without introducing another class.

Answer 1

+1 A:

Is the tbody really the first child of the table? If there is any other element that is an earlier sibling (e.g. a thead?) than this will not work.

I've tried the following test code and it seems to work:

<html>
    <head>
        <style type="text/css">
        table tbody tr th {
            border-top: 6px solid red;
        }
        table tbody:first-child tr th {
            border-top: 6px solid blue;
        }
        </style>
    </head>
    <body>
    <table>
    <tbody>
        <tr><th colspan="2">Title</th></tr>
        <tr><td>Data</td><td>Data</td></tr>
    </tbody>
    <tbody>
        <tr><th colspan="2">Title</th></tr>
        <tr><td>Data</td><td>Data</td></tr>
    </tbody>
    <tbody>
        <tr><th colspan="2">Title</th></tr>
        <tr><td>Data</td><td>Data</td></tr>
    </tbody>
    </table>
</body>
</html>

When adding a thead element, this stops working, because there is no tbody that is the first child of the table. What does seem to work in that case (at least in Opera) is the following:

table thead + tbody tr th {
    border-top: 6px solid blue;
}

This selects all tbody that directly follow a thead.

Marc 2010-06-01 21:12:31

Yes, there was a thead, and a selector using thead + tbody works for me, in (at least) Safari and PrinceXML so my issue is solved! Thanks!!!

mwiik 2010-06-01 22:02:25

`thead + tbody` will work as intended (the caption element should always be before thead, if it exists) and will have the broadest support from browsers, or you could also have used :first-of-type

Felipe Alsacreations 2010-06-02 09:13:20

btw, while I consider this question answered since it solved my immediate issue, but I'm not sure your logic is correct, since, if I understand correctly, that first-child refers to the first such element, that is, the thead shouldn't affect it any more than my col tags do.

mwiik 2010-06-02 13:40:20

Thanks Felipe, but as stated I don't need broad browser support in this case, just PrinceXML with webkit optional so I can check my work w/o constantly generating pdf's.

mwiik 2010-06-10 18:53:45

Answer 2

A:

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

mwiik 2010-06-10 18:51:05

I should give props to http://www.princexml.com/doc/7.0/selectors/

mwiik 2010-06-10 18:53:04

ansaurus

tags:

views:

answers:

Trying to style the first tbody different than others without introducing another class.

related questions