CSS changing positive values in green within the table

I have this CSS code which works great right now:

/* make the cells output their value */
td[data-monetary-amount]:after {
  content: attr(data-monetary-amount);
}

/* make debit amounts show up in red */
td[data-monetary-amount^="-"]:after {
  color: red;
}

and the table code:

<table border="1">
   <tr>
    <td>%entry%: </td>
    <td data-monetary-amount="%cred_f%"></td>
   </tr>


  </table>

Right now it changes the color in red when it contains a “-” character.

All other positive values are shown in a default color.

Since in my case, all other values are positive, how do I change that anything that’s over 0 (without the “+”) would display in a green color?

For example, if it’s:

2

5

7

it would be colored green?

Thanks a lot.

Answer

Just make green the “default” color by specifying the color property in the first css selector properties like this:

td[data-monetary-amount]:after {
  content: attr(data-monetary-amount);
  color: green;
}

td[data-monetary-amount^="-"]:after {
  color: red;
}
<table border="1">
   <tr>
    <td>%entry%: </td>
    <td data-monetary-amount="1337"></td>
   </tr>
   <tr>
    <td>%entry%: </td>
    <td data-monetary-amount="23"></td>
   </tr>
   <tr>
    <td>%entry%: </td>
    <td data-monetary-amount="42"></td>
   </tr>
   
   <tr>
    <td>%entry%: </td>
    <td data-monetary-amount="-20000"></td>
   </tr>
      <tr>
    <td>%entry%: </td>
    <td data-monetary-amount="-5"></td>
   </tr>
  </table>

Leave a Reply

Your email address will not be published. Required fields are marked *