テーブルのスタイルを効率よく設定するには？

質問

同じページに複数のテーブルがあり、別のスタイルを適用させたい。

----
<style TYPE="text/css">
TABLE.A {border-style: solid; }
TH.A { color: red; }
TD.A { color: blue; }

TABLE.B {border-style: double; }
TH.B { color: green; }
TD.B { color: black; }
</style>
<table class=A><tr><th class=A>A</th><td class=A>A</td></tr></table>
<table class=B><tr><th class=B>B</th><td class=B>B</td></tr></table>
---
<table><th><td>タグにclassを書けばいいのですが、もっとすっきりした方法はないでしょうか？

回答No.1

leaz024 · ベストアンサー

そのような場合は、状況依存セレクタが便利です。
※詳しくは参考URLをご覧ください。

<style TYPE="text/css">
TABLE.A {border-style: solid; }
TABLE.A TH { color: red; }
TABLE.A TD { color: blue; }

TABLE.B {border-style: double; }
TABLE.B TH { color: green; }
TABLE.B TD { color: black; }
</style>
<table class=A><tr><th>A</th><td>A</td></tr></table>
<table class=B><tr><th>B</th><td>B</td></tr></table>

参考URL：

http://tohoho.wakusei.ne.jp/css/basic.htm#ContextualSelectors

お礼

おお！すばらしい。
ありがとうございました。

回答No.2

kata_kori

２通り書いてみました。どちらでも良いかも。

<style TYPE="text/css">
#A{border-style:solid;}
#A th{color:red;}
#A td{color:blue;}
.B{border-style:double;}
.B th{color:green;}
.B td{color:black;}
</style>
<table id="A"><tr><th>A</th><td>A</td></tr></table>
<table class="B"><tr><th>B</th><td>B</td></tr></table>