Caters Caters - 4 months ago 10
HTML Question

Multiple classes to change color

I am wanting multiple text colors in a table. So I figured classes were the best way to go about this because I want multiple elements with that same color. I will only show the table I am working on in HTML and CSS.

So here is the table I am working on:



table.neutral {
border-style: solid;
border-width: 5px;
border-collapse: collapse;
border-color: olive;
}
td.neutral {
border-style: solid;
border-width: 1px;
border-collapse: collapse;
border-color: olive;
color: #FF4040;
}
td.neutral.good {
border-style: solid;
border-width: 1px;
border-collapse: collapse;
border-color: olive;
color: #00A550);
}

<table class="neutral">
<tr>
<th colspan="2">Muscularity index</th>
</tr>
<tr>
<td class="neutral">-3</td>
<td class="neutral">Very fat, Muscles don't show even if they are massive</td>
</tr>
<tr>
<td class="neutral">-2</td>
<td class="neutral">Fat, Massive muscles show</td>
</tr>
<tr>
<td class="neutral">-1</td>
<td class="neutral">Slightly fat, Most muscles show but with less definition</td>
</tr>
<tr>
<td class="neutral">0</td>
<td class="neutral">Not fat or muscular, this is the average</td>
</tr>
<tr>
<td class="neutral good">1</td>
<td class="neutral">Slightly muscular, muscles start showing</td>
</tr>
<tr>
<td class="neutral good">2</td>
<td class="neutral">Muscular, most muscles show with some definition</td>
</tr>
<tr>
<td class="neutral good">3</td>
<td class="neutral">Very muscular, all muscles show with definition</td>
</tr>
</table>
<caption>Table 2: Muscularity index</caption>





I tried with a space and no dot, with no space or dot, and with a dot as shown here in the CSS code. The 1, 2, and 3 are supposed to be green and their corresponding text coral red. So why are those positive numbers coral red instead of the green they are supposed to be? Descendent selectors should specify even more instead of not changing it at all.

Answer

You have a ) on your color attribute of your td.neutral.good class. Remove it and it will solve your problem.

table.neutral {
  border-style: solid;
  border-width: 5px;
  border-collapse: collapse;
  border-color: olive;
}
td.neutral {
  border-style: solid;
  border-width: 1px;
  border-collapse: collapse;
  border-color: olive;
  color: #FF4040;
}
td.neutral.good {
  border-style: solid;
  border-width: 1px;
  border-collapse: collapse;
  border-color: olive;
  color: #00A550;
}
<table class="neutral">
  <tr>
    <th colspan="2">Muscularity index</th>
  </tr>
  <tr>
    <td class="neutral">-3</td>
    <td class="neutral">Very fat, Muscles don't show even if they are massive</td>
  </tr>
  <tr>
    <td class="neutral">-2</td>
    <td class="neutral">Fat, Massive muscles show</td>
  </tr>
  <tr>
    <td class="neutral">-1</td>
    <td class="neutral">Slightly fat, Most muscles show but with less definition</td>
  </tr>
  <tr>
    <td class="neutral">0</td>
    <td class="neutral">Not fat or muscular, this is the average</td>
  </tr>
  <tr>
    <td class="neutral good">1</td>
    <td class="neutral">Slightly muscular, muscles start showing</td>
  </tr>
  <tr>
    <td class="neutral good">2</td>
    <td class="neutral">Muscular, most muscles show with some definition</td>
  </tr>
  <tr>
    <td class="neutral good">3</td>
    <td class="neutral">Very muscular, all muscles show with definition</td>
  </tr>
</table>
<caption>Table 2: Muscularity index</caption>