Making text bold in css-CodePudding

Is there a way to make text bold in the last row of a specific table in CSS without it bolding the last row in all tables in the same HTML?

tr:last-child td,{
    font-weight: bold;
}

This works, but there are many tables and I only want to bold the text in the last row of certain tables.

.total tr:last-child td {
    font-weight: bold;
}

tr.total:last-child td {
    font-weight: bold;
}

I also tried adding classes like this, but it did not bold anything.

CodePudding user response：

You can try setting ID to any specific row you want and they apply the css for that particular row only.

CodePudding user response：

If you want to target one particular table among others, giving it and id might be the right way

#tableId tr:last-child {
    font-weight:bold;
}

CodePudding user response：

Let's take a look at your two attempts:

.total tr:last-child td {
    font-weight: bold;
}

This would totally work for all tables with a CSS class total, e.g.

<table >
  <tbody>
    <tr>....</tr>
    .
    .
    .
    <tr>...</tr><!-- cells in this row would have bold text -->
  <tbody>
</table>

You second example can also work, but requires more control on the markup, which might be more difficult especially if the tables are e.g. generated from data.

.total tr:last-child td {
    font-weight: bold;
}

This would totally work for all table rows with a CSS class total, e.g.

<table >
  <tbody>
    <tr>....</tr>
    .
    .
    .
    <tr >...</tr><!-- cells in this row would have bold text -->
  <tbody>
</table>