JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr class="popular-link">

<td>text</td>
                
        <td><i class="icon">mock icon</i></td>
        <td></td>
        <td></td>
    </tr>
    <tr class="popular-link">
        <td>text</td>
        <td class="icon">mock icon</td>
        <td></td>
        <td></td>
    </tr>

</table>

CSS

.popular-link {
        color: blue;
    }

.popular-link *> .icon {
        color: green;
    }

.popular-link:hover *> .icon {
        color: grey;
    }

   .icon {
        color: red;
    }