Изменить цвет фона ячейки заголовка

Question

Я хочу установить цвет фона ячейки заголовка таблицы при щелчке по ячейке.

Ниже css, с помощью которого я устанавливаю фон ячейки заголовка таблицы.

#tblid > thead > tr > th {
    color: #515151;
    background: #b6e9fc;
}

Теперь, при щелчке по ячейке заголовка, когда я устанавливаю другой цвет, новый цвет не отображается в пользовательском интерфейсе, а исходный фон скрывает новый цвет фона. Я вижу новый color в инструменте разработчика, если мы удалим исходный цвет фона из приведенного выше css.

Не могли бы вы предложить какое-то решение этой проблемы. Я не хочу сначала удалять цвет фона, а затем устанавливать новый, потому что если я удалю исходный фон, вся строка заголовка потеряет фон. какой-нибудь лучший способ добиться этого.

Спасибо.

Answer 1

Я добился этого с помощью css только путем применения активного селектора. Я могу установить цвет фона ячейки th после нажатия на ячейку заголовка.

#tblid > thead > tr > th:active {
        color: #515151;
        background: #86dafa;
 }

<table id="tblid">
  <thead>
    <tr>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Cell</th>
    </tr>
  </tbody>
</table>