セレクタにはいくつかの指定方法があります。
ここでは① タイプセレクタと② 全称セレクタ、あるいはユニバーサルセレクタ、⑤ 疑似クラス・疑似要素について説明します。他の種類については別のところで説明します。
body、h1、p など既存の要素に対してスタイルを設定し、設定された要素すべてにその設定されたスタイルが適用されるセレクタをタイプセレクタと呼びます。要素名そのものをセレクタとして記述します。
タイプセレクタは基本セレクタ、あるいはタグスタイルとも呼ばれます
タグにスタイルを設定するので 「タグスタイル」、使用されている同一タグの全てにスタイルが適用されるので 「基本スタイル」とも呼ばれます。
たとえば、XHTML の <h2> 要素をセレクタとしたい場合は、次のようにスタイル (文字色の指定) を記述します。
すべての h2 要素に適用されます。
一方全称セレクタは要素名の代わりに 「* (アスタリスク)」 を指定します。たとえば、全称セレクタを使用して文字色をすべて同じにする場合は、次のように記述します。
その Web ページ内のすべての要素にそのスタイルが適用されます。Web ブラウザが持っているオリジナルのスタイルシートをいったんすべてリセットするときなどに全称セレクタを使用します。
このセレクタを使用することで、Web ブラウザのデフォルトのスタイルをリセットしたりするときに役立ちます。次の例は、すべての要素のマージンとパディングをゼロにするものです。
Web ブラウザのデフォルトスタイルをリセットする
ここでは全称、あるいはユニバーサルセレクタを利用してリセットしています。一度ですべてをリセットできるため非常に便利です。
ただ、この方法では良いデフォルトのスタイルを無駄にしてしまう、新しいプロパティに対応できない、という問題があります。
最近の傾向では、ユニバーサルセレクタを使わず、それぞれの要素ごとにスタイルを解除する方法がとられています。
文書の持つツリー構造によらずスタイルを適用するための仕組みのことで、:link、:hover、:before、:after などがあります。
この中で未訪問リンクを赤色表示、訪問済みリンクを灰色にするなど、操作の状況に応じた表現ができます。この二つをリンク疑似クラスと言います。
一方、ダイナミック疑似クラスと呼ばれるのがあります。それはユーザーアクションに反応して表示を変更する Web ブラウザで、その表示スタイルをコントロールする疑似クラスで、次の3つがあります。
これら疑似クラスは class セレクタや id セレクタと組み合わせて使用できるので、特定部分のリンクに別のスタイルを適用することが可能です。参照: id セレクタにするか class セレクタにするか
なお、一つのリンクに複数の疑似クラスを設定する場合は、上記の順に記述することが必要です。すなわち、:link、:visited、 :hover、 :active の順です。これはCSSのカスケード処理によって、あとに読み込まれたスタイルが優先的に取り扱われることを考慮しての順番です。
フォーカス
選択された状態のことですが、この選択された状態とは、キーボードの [TAB] キーでリンクをフォーカスした時です。マウスのポインターを乗せた状態 (hover)、クリックした状態 (active) とは区別されます。
フォーカスした状態は、標準で周りに点線が表示されます。
a:visited (訪問済み)の確認
訪問済みのスタイルを設定し、未訪問 ⇒ 訪問済みの変化の確認を行うとき、インターネット エクスプローラー (IE) の 「一時ファイル」 を削除してから行いましょう。
一時ファイルにあるかどうかで訪問済みかどうかを判断しているようです。
疑似要素については、リンク先を明示する、を参照してください。