* (ユニバーサルセレクタ) CSSセレクタの詳細とデモ

ユニバーサルセレクタ

文書内のすべての要素を選択します。
*{
margin: 0;
padding: 0;
}
このように記述することで、すべての要素のマージンとパディングを0に指定することができます。
一昔前は、ブラウザ特有のpadding値や、margin値に対応するためによく使われていましたが、
実際には、パフォーマンスが非常に悪いので使わないにこしたことはないでしょう。
また、CSSハックにも利用されてきた歴史もあります。
/* ie6 hack */
* html .notice {
color: red;
}

/* ie7 hack */
*:first-child + html .notice {
color: green;
}
CSSハックもブラウザのバグを利用したものに過ぎないので利用は推奨できません。
現在、ユニーバーサルセレクタを使う場面があるとしたら、一時的に全体にスタイルを試してみたい場合など
限られた条件のみかもしれません。

ブラウザのサポート状況

Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Firefox Google Chorme Safari Opera

*セレクタ のブラウザ動作デモ

※対応していないブラウザでは、正しく選択されません。

「*」値による動作デモ
デモでは、デモ領域(#result以下)のすべての要素にスタイルが指定されています。

兄弟要素1 <span class=class> </span>
子要素1-1 <span> </span>
孫要素1-1-1 <span> </span>
子要素1-2 <em> </em>
兄弟要素2 <span> </span>
子要素2-1 <span> </span>
兄弟要素3 <span id=id class=class> </span>
子要素3-1 <span> </span>
孫要素3-1-1 <input type=checkbox checked="checked"> </input>
孫要素3-1-2 <input type=checkbox> </input>
孫要素3-1-3 <input type=checkbox disabled="disabled"> </input>
孫要素3-1-4 <input type=radio checked="checked"> </input>
孫要素3-1-5 <input type=radio> </input>
孫要素3-1-6 <input type=radio disabled="disabled"> </input>
孫要素3-1-7 <input type=text> </input>
孫要素3-1-8 <input type=text disabled="disabled"> </input>
子要素3-2 <span> </span>
孫要素3-2-1 <em rel="hogedesu"> </em>
孫要素3-2-2 <em rel="myhoge"> </em>
孫要素3-2-3 <em rel="myhogedesu"> </em>
孫要素3-2-4 <em rel="hoge"> </em>
孫要素3-2-5 <em rel="piyopiyo"> </em>
孫要素3-2-6 <em rel="hoge piyo"> </em>
孫要素3-2-7 <em rel="hoge-piyo"> </em>
孫要素3-2-8 <em rel="piyo-hoge"> </em>
孫要素3-2-9 <em rel="foo-bar"> </em>
孫要素3-2-10 <em rel="hello"> </em>
子要素3-3 <span> </span>
孫要素3-3-1 <a href="#"> </a>
孫要素3-3-2 <a href="http://www.w3.org/"> </a>
孫要素3-3-3 <a href="http://shopping-nekodama.xii.jp/rakuten/search.php?c=200162&q=CSS"> </a>
孫要素3-3-4 <a href="#id"> </a>
兄弟要素4 <em> </em>
子要素4-1 <span> </span>
孫要素4-1-1 <b> </b>
孫要素4-1-2 <span class=class> </span>
ひ孫要素4-1-2-1 <i> </i>
孫要素4-1-3 <i> </i>
ひ孫要素4-1-3-1 <span lang="en"> </span>
ひ孫要素4-1-3-2 <span lang="ja"> </span>
ひ孫要素4-1-3-3 <span lang="en-us"> </span>
子要素4-2 <b> </b>
兄弟要素5 <span> </span>
兄弟要素6 <em> </em>
子要素6-1 <span> </span>

CSSサンプルコード

#result *{
  background: #fe9;
  outline: dotted 2px #f93;
  outline-offset:1px;
  color: #933;
  font-weight: bold;
  font-size: 12px;
}