Currently I am making a project that shows pokemon type interactions. Basically, I have 3 sets of tables. 2 for radio buttons and 1 for displaying the results. I understand I can do td:hover to apply the background color such as
—CSS—

    td:hover{
        background-color:green;
    }

—Text—
I’m not sure how to apply this while differentiating the tables in the html. This is a hobby project and I am a beginner. Here’s a snippet of sample code I am trying to edit.

—html—

    <!--This is the thing I'm trying to change on hover per td element-->
    <table>
        <tr>
            <td>
                <label for="Normal1" class="Normal">Normal</label>
                <input type="radio" name="types1" checked="checked" id="Normal1" value="Normal" />
            </td>
    
            <td>
                <label for="Fire1" class="Fire">Fire</label>
                <input type="radio" name="types1" id="Fire1" value="Fire" />
            </td>
    
            <td>
                <label for="Water1" class="Water">Water</label>
                <input type="radio" name="types1" id="Water1" value="Water" />
            </td>
        </tr>
    </table>

    <!--Without changing this in the same file-->
    <table>
        <tr>
            <td>
                <p class="AdjusterTypeStyle Normal">
                    Normal
                </p>
                <p class="AdjusterNumberStyle NumberDisplay" id="NormalAdjust">
                    x1
                </p>
            </td>

            <td>
                <p class="AdjusterTypeStyle Fire">
                    Fire
                </p>
                <p class="AdjusterNumberStyle NumberDisplay" id="FireAdjust">
                    x1
                </p>
            </td>
    
            <td>
                <p class="AdjusterTypeStyle Water">
                    Water
                </p>
                <p class="AdjusterNumberStyle NumberDisplay" id="WaterAdjust">
                    x1
                </p>
            </td>
        </tr>
    </table>

Solutions I’ve tried:

1. tried to identify with classes
   –CSS—

    table tr td.ChangeColorOnHover:hover{
        background-color:green;
    }

—html—

    <table class="ChangeColorOnHover">...

2. tried the child selector and classes
   —CSS–

    table[class="ChangeColorOnHover"] tr td:hover{
        background-color:green;
    }

    /*and*/
    table.ChangeColorOnHover tr td:hover{
        background-color:green;
    }