タグのcellPaddingとCSSのpaddingについて

質問

HTMLとスタイルシートについての質問です。
よろしくお願いします。

ブラウザの見え方の差異を回避するため、CSSの冒頭に*{padding:0;margin:0}
の記述をしています。
一部DIVでこの設定を適用外にしたかったため、クラスを利用し
.area *{padding:auto;margin:auto}と記述してみました。

一見思い通りになったように見えたのですが、tableタグのcellPaddingより
スタイルシートが優先されてしまうようで、cellPaddingが無視された形になって
しまいます。

タグをいじらずに.area内のcellpaddingが摘要されるようにするには
どのようにしたら良いでしょうか？

詳しい方ご教授ください。

回答No.2

ORUKA1951 · ベストアンサー

CSS--カスケーディングスタイルシートの命はカスケーディングです。なぜ皆さん、それを利用しないのでしょう。
　.や#だけを使ってデザインしようとするからぐちゃぐちゃになる。
　カスケードの仕組み--詳細度とか--を理解することからはじめましょう。基本的にCSSのためだけにidやclassを記述する必要は無い。

HTML内のタグにある属性は詳細度０として計算されます。
一方、CSS内の
.area *{padding:auto;margin:auto}
は、クラスセレクタの1しかありませんが、とにかく詳細度は1になります。
１> 0 よって、　.area *{padding:auto;margin:auto}が優先されるのは当然です。そう意図して書かれたのではないのですか？
　もしタグ内に書くなら
　style="cellpaddng:10px;">
とすると、詳細度は一気に100になりますから、優先されます。

スタイルシートは　セレクタ{プロパティ}となっていますが、そのセレクタ内の記述を単純計算して判断します。詳細度が大きいほうが優先される。
　セレクタ内にid(#)があれば、その数をa
　属性及び疑似クラスがあればその数をb
　要素名の数はc
　疑似要素は無視
　　a×100＋b×10＋ c

＞タグをいじらずに.area内のcellpaddingが摘要されるようにするには
＞どのようにしたら良いでしょうか？
　無理です。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/ )］より

お礼

困っているときに早急に回答いただき、どうもありがとうございました。
また、専門家の方の知識をご教授いただき、感謝いたします。

詳細度の計算式を知らなかったので、いままで
どうしてこうなっちゃうのかな？と思っていたところが腑に落ちました。
# 愛用している参考書には詳細度の記述がなく・・・

どうもありがとうございました。

回答No.3

ORUKA1951

＞# 愛用している参考書には詳細度の記述がなく・・・
ひょっとして、子孫セレクタとか兄弟セレクタとか(直接の)子セレクタの説明もない？？？
　詳細度やセレクタの知識は、CSSの最も重要な部分。それもない参考書とは自己矛盾しているような(^^)
　ひょっしとCSSもすへて
.class名{}
#id名{}
しかない。
　body div ul li{}
と
body div li{}
の違いとか、
div>p{}とかdiv+p{}も・・・

　詳細度やセレクタの基本が理解されていたら、CSSのためだけのclass名とかIDの記述はHTMLから姿を消しシンプルになる。そしたらメンテナンスも楽ですし。
例)
<ul>
　<li></li>
　<li></li>
　<li></li>
　<li></li>
</ul>
　と何もid,classを書かなくても、各<li>の色を別々に指定できる。(対応ブラウザはまだ少ない)

お礼

再び回答ありがとうございます。

>ひょっとして、子孫セレクタとか兄弟セレクタとか(直接の)子セレクタの説明もない？

子孫セレクタや直接の子セレクタの説明はありました。
対応していないブラウザが多いとのことで実用はしていませんが、
（そのために勉強不足になっているところでもあります）
div>p{}　などの記述方法も参考書で学習しました。

が、詳細度の計算式の記述は無く、
idの方がclassよりも優先される、というのも、実際のコーディングで
もしかしてそうなのかー？、と感じていたような状態でした。

キーワード（子孫セレクタとか兄弟セレクタとか）を教えていただきましたので、
これからその利用方法についてあちこち調べてみたいと思います。

色々と参考になりました、本当に有難うございました。

回答No.1

fujillin

padding:auto; だとpaddingを指定しない状態と同じことになってしまうので、全体のpadding指定が有効になってしまうのでは？

tdにpaddingを指定して、
　.area td { padding:10px; }
みたいにしてあげればいかがでしょう。

お礼

困っているときに早く回答いただけて、とてもうれしかったです。
お知恵をおかしいただき、本当にありがとうございました。

補足

>paddingを指定しない状態と同じことになってしまうので、
>全体のpadding指定が有効になってしまうのでは

pタグなどにはautoの記述で大丈夫だったみたいなのです。

>.area td { padding:10px; }

HTMLの雛形（テンプレート）を作っているので、
入力されるテーブルがいつも同じcellPaddingの値とは限らず、
・・・苦戦しています。

よろしくお願いします。