テーブル全体のグラデーション

Question

私は、ユーザーが特定のセルをクリックして選択するためのテーブルを持っています。

.clicked { 
    background: #43C6AC; /* fallback for old browsers */ 
    background: -webkit-linear-gradient(to left, #F8FFAE, #43C6AC); /* Chrome 10-25, Safari 5.1-6 */ 
    background: linear-gradient(to left, #F8FFAE, #43C6AC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 

} 

このような何かを返す：

私は希望をクリックの上に私はclicked

は、今ではこのようになりますクラスは、たとえばある<td>にCSSクラスを適用します例えば、4つのセルが選択された場合、最初のセルは緑色で、最後は黄色がかっているはずです。

どうすればいいですか？私はおそらく最良のアプローチは、選択されていない場合は、すべてのグラデーションのテーブルを白い背景を適用することになると思っています。

これが最善の方法ですか？ ありがとう

Answer 1

私はこれがあなたの最善のアプローチであることに同意します。最もきれいな方法は、言及したように、表や行全体にグラデーションを適用し、プレーン・ホワイトを適用するすべての非クリック要素にセレクタを使用することです。

tr { 
    background: #43C6AC; /* fallback for old browsers */ 
    background: -webkit-linear-gradient(to left, #F8FFAE, #43C6AC); /* Chrome 10-25, Safari 5.1-6 */ 
    background: linear-gradient(to left, #F8FFAE, #43C6AC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 

} 

td:not(.clicked) { background: #fff; } 

JSFiddle

：CSSは次のようになりますcomething