トップページの中の セレクタの中の ユニバーサルセレクタ (*)

ユニバーサルセレクタ (*)

  • 最終更新:2009年7月 7日 13:22

全称セレクタとも言われるユニバーサルセレクタは、全ての要素を対象に指定出来るセレクタです。 ユニバーサルセレクタは個別性が「0」のため、基本となるスタイルを一度、全ての要素もしくは多くの要素に指定することで、その後他のセレクタで上書きしていくといった使い方ができます。

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

ユニバーサルセレクタのサンプル

* {
  margin: 0;
  padding: 0;
}

単体で使用する事で、全ての要素に対してmargin: 0;padding: 0;が指定されるため、各ブラウザのデフォルトスタイルをリセットするのによく使われます。
これにより、新しくサイトを組み始める場合などに特定のブラウザで意図していない余白が発生してしまうといった事を防げます。
ただ、当然ながら全ての要素に適用されてしまうため、ブラウザがデフォルトで持っている良いスタイルも上書きしてしまい、後から個別に調整する必要などがあり、ユニバーサルセレクタによるリセットではなく、各要素それぞれに必要な指定を予めおこなっておく方法を取るケースも有ります。

他のセレクタと組み合わせて使う事も出来るため、有る程度要素を絞って指定する事も可能です。

div#main * {
  margin: 0;
  padding: 0;
}

上記のようにdiv#main *と指定する事で、#mainの子孫にあたる全ての要素に適用されます。
また、以下の指定は同じ意味を持ちます。

*.note {
  color: red;
}
.note {
  color: red;
}

*:first-child {
  border-left: 1px solid #ccc;
}

:first-child {
  border-left: 1px solid #ccc;
}

アスタリスク(*)の有無に関係なく.note*.noteおよび、*:first-child:first-childは同じ意味を持ちます。

また、ユニバーサルセレクタを使ったハックもあります。

.note {
  color: blue;
}

/* for IE6 */
* html .note {
  color: red;
}

/* for IE7 */
*:first-child + html .note {
  color: green;
}

上記の例では、IE6, 7以外で文字が青になり、IE6では赤に、IE7では緑になります。

  • CSS HappyLife
  • underHat
著書(全て共著)

このページの上部へ