Multiple classes


#1

I am wanting multiple colors in a table. In particular my 2 scale tables(muscularity index and Relationship index).

So I tried doing this HTML:

<tr>
            <td class = "Neutral" class = "Good">1</td>
            <td class = "Neutral">Slightly muscular, muscles start showing</td>
        </tr>

and this CSS:

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

This should make the number 1 on the muscularity index scale green and the text corresponding to it coral red. However this green isn't even in there. Descendant selectors like this should specify even more and thus the color if it is different for the descendent class should be different for the main class with descendant subclass than just the main class alone. So why isn't it changing the color of the number 1 to green and is instead keeping it coral red?

Here is the link to the rest of the code:

Kepler Bb


#2

Element attributes are a set, meaning there are no repeated key names. class is a key name which if repeated in an element will register only the last one present. So the class Neutral will not be registered with the element in the first line.

Two things to note:

  1. Class names are typically lower case to reduce potential errors or issues.
  2. Extra white space in elements is uncommon.

To give an element multiple classes write them in a space separated list:

<td class="neutral good">1</td>

#3

That's good for the HTML but what about the CSS that controls how the HTML appears? I changed the HTML as you said and I tried 3 different CSS rules. Those are:

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

td.neutralgood{border-style: solid; border-width: 1px; border-collapse: collapse; border-color: olive; color: #00A550);}

and

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

However, there isn't a color change with any of these CSS rules when there should be. I actually tested them and looked at the resulting table and there was no change at all. So I am still stuck as to how to get there to be a different color than just with the main class.