全称セレクタを上手く使おう

全称セレクタというのをご存じでしょうか？セレクタに*を使い、全ての要素を表しています。今回は全称セレクタの使いどころを紹介します。

ブラウザーはきちんとマークアップするだけで読めるようにするために、オリジナルのスタイルシートを持っています。 例えば、bodyのmarginやh1の大きなフォント、addressの斜体などです。

ある意味親切なのですが、ブラウザーによってデフォルトの設定が違うし、自分で細かくスタイル設定したいときは邪魔なだけです。

そこで登場するのが全称セレクタ。これを使ってデフォルトの設定を全て消してしまいましょう。一例として私が利用している全称セレクタを紹介します。

きくちゃん愛用の全称セレクタ

*{
    margin:0;
    padding:0;
    font:normal normal normal 100%/1.3 "ＭＳ Ｐゴシック","Osaka",sans-serif;
    border:none;
}

このように設定することでデフォルトの設定をほぼ全て消すことが出来ます。 これにより、どんなタグを使っても余白はできず、文字のサイズも同じで斜体がかかったりすることもありません。

全称セレクタは優先度が最も低いので、容易に打ち消すことが出来ます。必要なセレクタを追加して値を上書きしていけばそれが適用されます。

デフォルトの設定で事足りる場合は必要ありませんが、ほとんどの人はデザインにも気をつかっているでしょうから是非取り入れて欲しいものです。

ちなみに次のような使い方も出来ます

#main * p{
    border-bottom:1px #006699 solid;
}

こうすると#main直下のpには影響がありませんが、#mainの中にあるdivやliに内包される全てのpに影響を与えることが出来ます。

---