ユニバーサルセレクタで指定したのに・・・？

質問

CSSのユニバーサルセレクタについて質問です。

CSSで、* {margin:0;padding:0;}とユニバーサルセレクタを指定しているのですが、下位でh2に{padding-left:10px;}を指定すると、h2の文字列の開始位置が10px下がります。

使用上問題はないのですが、これはなぜでしょうか？
何か私の指定が間違っているのでしょうか？

回答No.1

ORUKA1951 · ベストアンサー

全称セレクタの詳細度が０であることはご存知ですよね。
CSS2.1は、セレクタの記述方法が
「基点となるセレクタ」に様々なセレクタを追加することになりました。CSS1で
.header{}
と書いていたものが
p.header{}
と指定することになりました。それとの整合性のため*全称セレクタが導入されて
.header{} は *.header{} と解釈されることになりました。

タイプセレクタを用いて
h2{padding-left;}
と記述すると、ブラウザはh2要素にあてはまるセレクタをすべて検索して
*{margin:0;padding:0;}
と
h2{padding-left;}
を見つけ出します。
いずれにも最重要宣言はされていませんから、詳細度でどちらを適用するかを決めます。
この場合、h2のタイプセレクタは、詳細度が001ですから、詳細度0000の*よりも高いため、h2に対する宣言が適用されます。

なお、*全称セレクタになるmargin:0;padding:0は指定すべきではありません。なぜなら、カスケーディング--CSSの最も重要な仕組み---によって、本来ブラウザが持つmargin,paddingに対するすべての設定が上書きされます。
　ユーザーの最重要宣言＞著者の最重要宣言＞著者の宣言＞ユーザーの宣言＞ブラウザの宣言
　ブラウザの持つスタイル宣言は
★http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/sample.html

　これがすべて削除されますから、文書内で新しい要素が登場するたびに、著者がすべて指定する必要が発生します。たとえばulやolが登場すると、li{margin-left:1em;}とか・・
　*{margin:0;padding:0;}は某オーサリングツールなどがテンプレートで好んで使用する指定方法で、自分でスタイルシートを書くときにこんなもの書いたら、スタイルシートが肥大化してしまいます。
5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )

　このカスケーディングや詳細度・継承の仕組みをつかってスタイルが、簡単に記述できるのですよ。

お礼

>全称セレクタの詳細度が０であることはご存知ですよね。
恥ずかしながら知りませんでした。
とてもわかりやすい説明で納得できました。
*{margin:0;padding:0;}は、今回覚えたばかりで、なんて便利なんだろう！と初めて使ってみたのですが、自分で書く時にはあまり使わない方がいいのですね。
勉強になりました。ありがとうございました(^_^)