стиль таблицы - возможно ли для правила td: hover переопределить tr: hover?

Question

Мне было интересно, возможно ли иметь таблицу в стиле :hover с фоновыми правилами для tr и td с определенным классом, чтобы при заданном конкретном td фон применялся только к этому элементу, а не к tr это внутри.

Так, например:

tr:hover {
    background: blue;
}
td.something:hover {
    background: yellow;
}

<table>
    <tr>
        <td></td>
        <td></td>
        <td class="something"></td>
    </tr>
<table>

Здесь я бы хотел, чтобы в таблице была выделена строка, если первые два элемента td наведены, но не на третий с помощью something css класс.

Мне было интересно, может ли селектор :not чем-то помочь, но я пока не нашел способа. Возможно ли это?

Спасибо

Answer 1

Конечно, это возможно. Вот скрипка

HTML

<table>
  <tr>
    <td>
      first td
    </td>
    <td>
      second td
    </td>
    <td>
      third td
    </td>
  </tr>
</table>

CSS:

   td:hover{
      background-color:red;
    }
    tr:hover{
      background-color:yellow;
    }
    td{
      border:1px solid black;
      padding: 5px;
    }

Answer 2

Вы можете исключить теги с вашим css классом следующим образом

table {
  border: 1px solid blue;
}

tr:hover td:not(.something) {
    background: blue;
}

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td class="something">Cell 3</td>
    </tr>
<table>

Или если вы хотите, чтобы некоторые ячейки были выделены желтым bg, а другие - синим:

tr:hover td:not(.something) {
    background: blue;
}

tr:hover td:not(.anotherthing) {
    background: yellow;
}

<table>
    <tr> 
        <td class="anotherthing">Cell 1</td>
        <td class="anotherthing">Cell 2</td>
        <td class="something">Cell 3</td>
    </tr>
<table>

Answer 3

Я думаю, это то, что вы хотите:

tr:hover {
    background: blue;
}
tr:hover td.something {
    background: #FFF;  
}

tr:hover td.something:hover {
    background: yellow;
}

<table>
    <tr>
        <td>aaa</td>
        <td>aaa</td>
        <td class="something">dddd</td>
    </tr>
<table>