既にhtmlで指定したカラーの変更をcssでしたい

楽天で出店しております。
商品ページにテーブルが組み込まれ、テーブルにhtmlでカラーが指定されています。
cssで変更可能か、ご教授下さい。
cssも見よう見まねですが、jqueryは難解なので出来る事ならcssで変更したいと思っております。

表は　２列×6行
項目が左

ブランド　｜　○○○
サイズ　｜　○○○
材質　｜　○○○
仕様　｜　○○○
カラー　｜　○○○
特徴　｜　○○○
ご注意　｜　○○○

となっており、既存のテーブルにはthは指定されておらず
全てtdで区切られている状態です。

項目のボールドもカラー指定も、セル単位で指定されています。

希望としては、既存のテーブルと、今度の商品ページで作るシンプルなhtmlのテーブルの両方に反映するcssにしたいと考えております。
・項目　ボールド、背景のカラー指定　（変更確認済み）
・項目　カラー変更
・最後の項目のみ　赤色に

htmlはそのままで、（class idをつけずに）テーブルの中の背景色や文字のカラーを変更したく
楽天のRMSの中で商品ページのタグが入れれる『PC用商品説明文』という項目にテーブルを1つだけ入れているので

cssで
.item_desc
で指定し、
td:first-child
で項目のボールドや背景等は変更を確認出来たのですが、
どうしても文字のカラーが変更出来ません。

cssのみで項目のカラーを指定のカラーに変更し、項目の最後を赤にしたいので、
是非ご教授願います。

No.3 回答者： ORUKA1951 回答日時： 2016/03/04 09:56

＞見よう見まねで必要に駆られて色んなサイトを参考にしながら無理矢理やっておりますので、勉強不足で専門用語が分かりません。

　いや、これか一番非効率で時間もかかり、何よりもうまくいかないのです。---私の20年近い長い経験から断言できる。

＞私レベルで分かる様に噛み砕いてご教授頂けると幸いです。
　なら、仕様書をとりあえず読みましょう。数学の勉強がきちんと基礎から順を追って学べば小学生でも数検２級が取れるように、そのほうがはるかに速く作業を進められる。そもそも、用語がわからないでは説明を聞いてもチンプンカンプンでしょう。例えば[詳細度を高くしなさい」と一言で正確に言われても、セレクタや詳細度の計算がわからないでは役に立たないでしょう。

＞既存のテーブルの文字は全てFontタグに挟まれて色指定がされており、
<font>は非推奨の典型ですが、その色指定は属性(attribute)で指定されているのでしたら、詳細度は0として産出されますから、詳細度0001の指定でも上書きできます。
「ユーザーエージェントは、HTMLソースドキュメントの体裁用の属性を尊重してよい。その場合、これらの属性は0に等しい詳細度と対応するCSS規則に変換され、それらは著者スタイルシートの先頭に挿入されたかのように扱われる。したがって、後のスタイルシート規則によって上書きされることがある。( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )」
→6.4.3 セレクタの詳細度の計算( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　そして、colorプロパティは継承されるプロパティですから
継承: yes( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

<td><font color="red">
に対して、td{color:green;}の場合、<font color="red">がなければ継承されますが、それがあると詳細度0とはいえそちらが適用されます。対策としては、
font{color:inherit;}と継承させるか、td font{color:green;}とすればよいはわかりますよね。
　colorプロパティの値は、
値: <color> | inherit( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　なのですからね。

★ちなみに、fontで可能な属性
size=,color=,face=
15.2.2 フォント変更要素: FONT要素とBASEFONT要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
については、対応するCSSのプロパティで
font{color:inherit;size:inherit;font-family:inherit;}
とすれば、すべて無視してくれる。(^^)
　こんなこと仕様書にサラッと書いてある。
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

★「見よう見まねで必要に駆られて色んなサイトを参考にしながら無理矢理やっておりますので、勉強不足で専門用語が分かりません。」がとにかく間違い。最も時間がかかり、無駄で間違いに陥りやすい。
　きちんと仕様書から始めていたら、1～2週間もあれば済んでいた作業でしょう。

No.2 回答者： ORUKA1951 回答日時： 2016/03/02 19:07

HTMLでの指定が<th style="color:red">となっている場合は、無理です。

スタイルシートにカスケーディングスタイルシート(CSS)をお使いでしたら、カスケーディングはプロパティより前に書かれている基礎部分ですから、ご存知だと思います。
　HTMLのスタイル属性の場合の詳細度は 1,0,0,0 ですが、td:first-childの詳細度は 0,0,1,1 ですから・・・
　※そうではなく、<td color="">は誤りなのでないとして、<td><font color="">の場合は、
table.item_desc tr td:first-child font{color:red;}

5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティー値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

2.ソートは重要性（通常、important）と起源（著者、ユーザー、ユーザーエージェント）に従う。優先順位は昇順で:
　　1.ユーザーエージェントの宣言
　　2. ユーザーの通常宣言
　　3.著者の通常宣言
　　4.著者のimportant宣言
　　5.ユーザーのimportant宣言
3. 同じ重要性と起源をもつ規則を、セレクタの詳細度によってソートする: より詳細なセレクタが、より一般的なものを上書きする。擬似要素と擬似クラスはそれぞれ、通常の要素とクラスとみなされる。
4.最後に、指定された順序でソートする: 2つの宣言が同じ重み、起源と詳細度を持つ場合、最後の指定された規則が適用される。取り込まれたスタイルシートの宣言は、スタイルシート自体の宣言に先行するものと考えられる。

　よって、スタイルシートで、!important宣言をつけなければなりません。

　そうでなければ、tableのclass　item_desc　なら
table.item_desc tr td:first-child{}
で変更できるはずです。
　この場合、rowspanが前の行に指定されていると、期待外れのところが変更されるので、その場合はコツコツと隣接セレクタで修正します。

CSS２以降
.item_desc　なんて書き方はしません、無きちんと起点セレクタを書いて table.item_desc とか、*.item_descとしましょう。(前者は詳細度 0,0,1,2、後者は 0,0,1,1)・・・詳細度も文書構造もわかりやすいので・・
「単体セレクタは型セレクタもしくは 全称セレクタのいずれかの直後に、0個以上の属性セレクタ、IDセレクタ、擬似クラスが任意の順序で続くものである。セレクタの構成要素のすべてが一致する場合、単体セレクタはマッチする。( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )」
　.item_descと書かれていると、*(全称セレクタが省略されているとみなしてはくれますが）

＞htmlはそのままで、（class idをつけずに）テーブルの中の背景色や文字のカラーを変更したく
　きちんと
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティー値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　が身についていれば可能です。
　具体的にはHTMLのソースがわからないので示せません。

この回答へのお礼

ありがとうございます。
とても分かりにくい説明の中、丁寧に教えて下さって恐縮です。

見よう見まねで必要に駆られて色んなサイトを参考にしながら無理矢理やっておりますので、勉強不足で専門用語が分かりません。

結果、本日文字カラーの問題を残してその他の更新をしましたが、文字カラーの問題は残ったままです。

前任者の作った、商品ページのテーブルはhtmlのみで構築されており、全てのセルや文字にカラー指定やフォントサイズ、背景色が書かれてとても長いので、文字制限もある為今後は装飾はcssで済ませてシンプルなテーブルに変えたかったのが始まりです。

しかし商品ページは2000個以上あり、セルの幅指定もマチマチなので、既存のhtmlはそのままに今後作る商品ページのテーブルをシンプルにし、マチマチだったカラーや幅もcssのみで統一したく思っております。

元来、トップページ以外は出店者には自由にいじれないと諦めていたのですが、この度楽天の規定で商品ページの選択肢の中に長い文字を入れなくてはならず、カートのテーブルが崩れたので調べて商品ページもcssで変更可能でしたので、だったら悩みの種だった説明文のテーブルもなんとか出来るはず！と、、、
まだまだこのレベルです。
ど素人です。

現状、幅や背景色は変更できました。

既存のテーブルの文字は全て
Fontタグに挟まれて色指定がされており、
.item_desc
というのは、楽天側の、タグを含めた商品説明文を入れてるスペース全体のclassの事です。

importantも効きません（現在携帯で打っているのでスペルが違っていたらすみません）
テーブルの中の、fontタグで挟まれた文字カラーをcssで変更するには、どの様にしたらよろしいでしょうか？

私レベルで分かる様に噛み砕いてご教授頂けると幸いです。

お礼日時：2016/03/03 20:45

No.1 回答者： Tacosan 回答日時： 2016/03/02 00:56

https://css-tricks.com/override-inline-styles-wi …
みたいなこと?