CSSでのリンク状態を用いた複雑なセレクター

これまでに学んだすべての複雑なセレクターは、 リンクに対しても適用できます。

例を見てみましょう。リンクが特定の idを持つブロック内にあるとします：

html<div id="block">
  <a href="#">リンク</a>
  <a href="#">リンク</a>
  <a href="#">リンク</a>
</div>

このブロック内のリンクにスタイルを設定してみましょう：

css#block a:link, #block a:visited {
  color: red;
}
#block a:hover {
  text-decoration: none;
}

通常、link状態とvisited状態は 区別しないため、コードは次のように簡略化できます：

css#block a {
  color: red;
}
#block a:hover {
  text-decoration: none;
}

css#test a {
  color: red;
}
#test a:hover {
  text-decoration: none;
}