Как реализовать задумку?

Question

[Сергей Чистяков]

Есть некий html:

<table id="o"><tr>
  <td>
    <table><tr>
      <td>внутри</td>
    </tr></table>
  </td>
  <td>
    снаружи
  </td>
</tr></table>

И нужно сделать так css, чтобы подсвечивались (по наведению, нажатию, не важно) ячейки таблицы снаружи, а внутренние - нет. Пробовал через селектор ">" добраться, но, увы, не смог. Если ставить просто пробелы, то выделяет все ячейки - и внутренние и внешние.

Answer 1

[Владлен Грачев]

Переопределить для внутренней ячейки отсутствие подсвечивания как-то так.

Comments

[Сергей Чистяков]

@gwer а если не переопределять, предположить, что внутри много вложенных таблиц?

И, вообще, почему не работает ">"?

[Владлен Грачев]

Даже если внутри вложенных много, переопределенное свойство отнесется к ним ко всем.
А селектор дочернего элемента не работает, потому что это таблица. Нужно что-то вроде:
#o > tbody > tr > td
При этом все равно содержимое вложенных таблиц перекрасится, ибо унаследует свойство указанного элемента.

[Сергей Чистяков]

Спасибо.

Answer 2

[Максим Тимофеев]

table:hover td {background-color:red;}
table:hover table>td {background-color:white;}