リンクにスタイルを適用するには記述する順番が肝心!

これまでにご説明してきたように、リンクにスタイルを適用する場合には、記述する順番が重要です。
以下の順番を守って記述するようにして下さい。

  • :hover 」を記述する際は、「 :link 」や「 :visited 」よりも後、「 :active 」よりも前に記述します。
  • :active 」を記述する際は、「 :link 」や「 :visited 」、「 :hover 」よりも後に記述します。

要するに、次の順番で常に記述するようにしておけば大丈夫です。

  1. :link
  2. :visited
  3. :hover
  4. :active

補足: Internet Explorerの動作
Internet Explorer 6.0 の場合、「まだ行ったことのないリンク( :link )」に関しては、記述順を気にせずに「 :hover 」や「 :active 」を記述しても、望み通り色が変わります。 しかし、それはスタイルシートの文法的に正しい動作ではありません。また、他の代表的なブラウザでは、この記事でご紹介したように、「 :link 」を後に記述してしまうと、「 :hover 」や「 :active 」のスタイルは有効になりません。 ですから、上記でご紹介した順番でスタイルを記述するようにして下さい。

補足: 上から順番に適用されるとは限りません
前のページで、「上から順番に適用されると考えると分かりやすい」と書いています。 これは、この記事でご紹介した状況を理解するには、そのように考えると分かりやすいのではないか、というだけです。
スタイルシートには、「同じスタイルは後に記述した方を優先する」という以外にも、適用優先順位に関する規則があります。 ですから、どんな場合でも「上から順番に適用されていく」というわけではありません。 他の優先順位規則に該当する場合には、上に記述したスタイルが、下に記述したスタイルよりも優先して採用されることもあります。

終わりに

今回は、ホームページ上で非常によく利用されている「リンクの状態によって変化するスタイル」について、 記述順が実は重要だということをご紹介致しました。

ぜひ、気を付けて記述して下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。