tr全体にhover指定したいのに一部のtdが適用されないとき

インターネット初心者が仕事中にハマったので備忘録がてら

やりたいこと

tableタグのとある行にマウスが触れたとき(:hover)、行全体の背景色を変えたい。

問題

一部のセルにクラスで背景色を指定しているので、その部分だけ:hoverで背景色を指定しても適用されない。

対応策

cssの疑似セレクタの書き方を工夫する

ソースコード

• HTML

<table class="tbl">
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td class="a"></td>
            <td class="a"></td>
        </tr>
        <tr class="b">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

• CSS

.tbl td.a {
    background-color: yellow;
}
tbody tr.b {
    background-color: green;
}

/* 修正前：マウスが触れた行の背景色を変える */
.tbl tbody tr:hover {
    background-color: blue;
}

/* 修正後：マウスが触れた行のすべてのセルの背景色を変える */
.tbl tbody tr:hover td{ /* ←tdを付け足す */
    background-color: blue;
}

ソースコード：おまけ

今回は一部のtdだけtrのhoverが適用されない問題を解決したけど、逆に（逆に？）一部箇所だけhoverを適用させたくない場合はこういう風に書けばいいらしい

.tbl .a {
    background-color: yellow;
}
.tbl .b {
    background-color: green;
}

/*マウスが触れた行のすべてのセルの背景色を変えつつ、特定のクラスを持つ行だけは適用しない*/
.tbl tbody tr:not(.b):hover td{ 
    background-color: blue;
}

疑似セレクタって難しいなー