How to change <td> color w/in a <div> using selectors?

I’m working on creating HTML documents of songs (specifically kPop), and colour-coding the lyrics by the singer.

Originally, I was adding classes to the <tr> elements, which did work. But I was wanting to see if I could further simplify the amount of typing needed. The <tr> elements were already nested within <div> elements, organizing them by what part of the song they were (verse1, chorus1, etc).

For the life of me, I cannot figure out how to get the css selectors to apply the styling to the <td> elements when I am selecting the class of the <div> element.

This is what I currently have, and does work to colour the lyrics correctly:

<table>
   <thead>
      <th>Romanization</th>
      <th>Hangul</th>
      <th>English</th>
   </thead>
   <tbody>
      <--! Verse 1-->
      <div class='v1'>
         <tr class='liz'>
            <td>Jipjunghae nun gamgo daeum sungan</td>
            <td>집중해 눈 감고 다음 순간</td>
            <td>Focus, the moment after you close your eyes</td>
         </tr>
         <tr class='liz'>
            <td>Meorissogeul maemdoneun merry go round</td>
            <td>머릿속을 맴도는 merry go round</td>
            <td>A merry go round spinning in your head</td>
         </tr>
         <tr class='leeseo'>
            <td>Muishik sogeuro fallin’ down</td>
            <td>무의식 속으로 fallin’ down</td>
            <td>Fallin’ down into the unconscious</td>
         </tr>
         <tr class='leeseo'>
            <td>Dansume ppajyeodeulji</td>
            <td>단숨에 빠져들지</td>
            <td>You’ll fall for me instantly</td>
         </tr>
      </div>
   </tbody>
</table>

What I ideally would like to accomplish is something like this:

Edit: Thank you for telling me about how <div> cannot be used inside tables, I did not know they wouldn’t be parsed. Is there any better method of organizing <tr> elements so I can reduce the amount of classes my <tr> elements contain?

<table>
   <thead>
      <th>Romanization</th>
      <th>Hangul</th>
      <th>English</th>
   </thead>
   <tbody>
      <--! Verse 1-->
      <div class='v1'>
         <div class='liz'>
            <tr>
               <td>Jipjunghae nun gamgo daeum sungan</td>
               <td>집중해 눈 감고 다음 순간</td>
               <td>Focus, the moment after you close your eyes</td>
            </tr>
            <tr>
               <td>Meorissogeul maemdoneun merry go round</td>
               <td>머릿속을 맴도는 merry go round</td>
               <td>A merry go round spinning in your head</td>
            </tr>
         </div>
         <div class='leeseo'>
            <tr>
               <td>Muishik sogeuro fallin’ down</td>
               <td>무의식 속으로 fallin’ down</td>
               <td>Fallin’ down into the unconscious</td>
            </tr>
            <tr>
               <td>Dansume ppajyeodeulji</td>
               <td>단숨에 빠져들지</td>
               <td>You’ll fall for me instantly</td>
            </tr>
         </div>
      </div>
   </tbody>
</table>

My current CSS looks like this, its incredibly barebones but works:

.liz {
    color: teal
}

.wonyoung {
    color: red
}

.rei {
    color: green
}

.gaeul {
    color: blue
}

.yujin {
    color: pink
}

.leeseo {
    color: yellow
}

I’ve tried the following CSS selectors:

.liz {
    color: pink
}

.liz td {
    color: pink
}

.liz tr td {
    color: pink
}

I’ve done some research into inheritance and seeing if I could get the <td> elements to inherit the colour property from the <div> elements, but what mainly pops up is how having inheritence chain like that goes against W3 best practices.

Since this is purely for myself (I will be storing them in Obsidian, which displays notes in markup and HTML), I wanted to see if what I want to accomplish is even possible. Ideally, without using Javascript.