いきなりですが、クイズです。

次のスタイルシートを見て下さい。このスタイルシートを適用した結果、h1要素とh2要素の文字は何色になりますか?

h1 { color: red; }
h2 { color: blue; }

答えは簡単。h1要素は赤色(red)h2要素は青色(blue)ですね。

では、次のスタイルシートを見て下さい。このスタイルシートを適用した結果、h1要素とh2要素の文字は何色になるでしょうか?

h2 { color: blue; }
h1 { color: red; }

h1要素とh2要素に対するスタイルの記述順が変わっています。
しかし、答えは一緒。h1要素は赤色(red)h2要素は青色(blue)ですね。
どのような順番で記述しても一緒です。

スタイルシートでは記述順に意味はないの?

では、本題です。次の2つのスタイルシートをよく見て下さい。

■スタイルシートA:
a:link { color: red; }
a:visited { color: purple; }
a:hover { color: green; }
a:active { color: yellow; }
■スタイルシートB:
a:active { color: yellow; }
a:hover { color: green; }
a:link { color: red; }
a:visited { color: purple; }

リンクの状態に応じて適用するスタイルを変化させるスタイルシートですね。
こちらも先ほどの例と同じように、記述する順番が異なっているだけです。 さて、このA・Bのスタイルシートを適用した結果、それぞれどう見えるでしょうか?

やはり、どちらも同じように見えるでしょうか?

実は違います。上記のA・Bのスタイルシートでは、見え方が異なってしまうのです。 違う点は、記述順だけであるにもかかわらず、両者では見え方が異なります。

※補足:

よく使われるのでご存じの方々が多いでしょうが、念のために簡単にご紹介しておきましょう。 上記のソースで使用しているスタイルは、それぞれの条件に合致するリンクに対してのみ有効になります。

  • a:link    : まだアクセスしたことのないリンクに適用
  • a:visited : 既にアクセスしたことのあるリンクに適用
  • a:hover   : マウスが上に乗っている状態のリンクに適用
  • a:active  : 選択されている状態のリンクに適用

記述順が異なるだけで、見え方が異なってしまうのはなぜでしょうか?

スタイルの記述順と表示の関係は 次のページで! →