All geek questions in one place

An attempt to style the first theme, different from the others, without introducing another class

I have a table with several tbody, each of which has a classified row, and I want the classified row in the first tbody to have style differences, but I cannot get tbody: first-child to work in any browser. Maybe something is missing me, or maybe a workaround.

Ideally, I would like to provide programmers with one tbody section, which they can use as a template, but otherwise I will have to add a class to the first tbody, which will make an additional test in programming.

html is simple:

<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 bodies in the table. I want to style th and td inside tr.subGroupHeader in the very first text differently than the rest. To illustrate this, I want to add a border vertex to the tr.subGroupHeader cells.

The tr.subGroupHeader command will be created with a boundary top, for example:

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

For the first I try:

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

However, this does not work in any browser (I tested in Safari, Opera, Firefox and PrinceXML, all on my Mac)

Curiously, the usually excellent Xyle Scope tool indicates that the blue border should take precedence, although this is obviously not the case. See the screenshot at http://s3.amazonaws.com/ember/kUD8DHrz06xowTBK3qpB2biPJrLWTZCP_o.png

( ) th ( ), ( css), , , . .

, - , , tbodys... PrinceXML , , Safari, , CSS webkit.

. , tr.subGroupHeader: first-child, tr, -, ( ), .

...

+3
2

, . .

:

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

:

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

? - , (, thead?), .

, , :

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

thead , tbody, . , ( , Opera) :

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

, .

+1

Source: https://habr.com/ru/post/1748044/

More articles:


All Articles