ユニバーサルセレクタ

全ての要素を対象とする場合に使用するのがユニバーサルセレクタです。

次のように記述します。 

* {
  プロパティ: 値;
}

アスタリスク(*)だけを記述します。全ての要素が対象となります。

よく使われるのが、各要素にデフォルトで設定されているマージンとパディングを0に設定する場合です。次のように記述します。 

* {
  margin: 0;
  padding: 0;
}

スタイルシートの先頭にこのような記述をすると、各要素にデフォルトで設定されているマージンとパディングを0に設定できます。

属性の指定と合わせて使用する

ユニバーサルセレクタは全ての要素が対象となりますが、class属性やid属性を指定することは可能です。 

*.値 {
  プロパティ: 値;
}

*#値 {
  プロパティ: 値;
}

この場合、全ての要素の中でclass属性の値やid属性の値が一致するものが対象となります。なおこのような場合は「*」を省略して次のように記述できます。 

.値 {
  プロパティ: 値;
}

#値 {
  プロパティ: 値;
}

※「クラスセレクタ」や「IDセレクタ」も参照して下さい。

サンプル

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>CSSの書式</title>
    <style type="text/css">
    * {
      color: #ff0000;
    }
    </style>
  </head>

  <body>

    <p>
    カテゴリ一覧
    </p>

    <ul>
    <li>アクション</li>
    <li>ミステリー</li>
    <li>SF</li>
    <li>ヒューマン</li>
    </ul>

  </body>
</html>

実際にブラウザで見てみると下記のようになります。

ユニバーサルセレクタ

ユニバーサルセレクタを使い、全ての要素の文字色を#ff0000に設定しています。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。