|    | 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  |

セレクタの種類 - タイプセレクタ、全称セレクタ、疑似クラス・要素について

セレクタを使い分ける

セレクタの指定方法はいろいろ

セレクタにはいくつかの指定方法があります。

ここでは① タイプセレクタと② 全称セレクタ、あるいはユニバーサルセレクタ、⑤ 疑似クラス・疑似要素について説明します。他の種類については別のところで説明します。

タイプセレクタ (要素名)

bodyh1p など既存の要素に対してスタイルを設定し、設定された要素すべてにその設定されたスタイルが適用されるセレクタをタイプセレクタと呼びます。要素名そのものをセレクタとして記述します。

たとえば、XHTML の <h2> 要素をセレクタとしたい場合は、次のようにスタイル (文字色の指定) を記述します。

  • CSSソース:
    • h2 { color : #ffcccc ; }
  • XHTMLソース:
    • <h2>五十音</h2>
    • <p>あいうえお<br />
    • かきくけこ</p>
    • <h2>いろは</h2>
    • <p>いろはにほへと<br />
    • ちりぬるを</p>

すべての h2 要素に適用されます。

全称セレクタ、あるいはユニバーサルセレクタ ( * )

一方全称セレクタは要素名の代わりに 「* (アスタリスク)」 を指定します。たとえば、全称セレクタを使用して文字色をすべて同じにする場合は、次のように記述します。

  • CSSソース:
    • * { color : #ffcccc ; }
  • XHTMLソース:
    • <h2>五十音</h2>
    • <p>あいうえお<br />
    • かきくけこ</p>
    • <h2>いろは</h2>
    • <p>いろはにほへと<br />
    • ちりぬるを</p>

その Web ページ内のすべての要素にそのスタイルが適用されます。Web ブラウザが持っているオリジナルのスタイルシートをいったんすべてリセットするときなどに全称セレクタを使用します。

このセレクタを使用することで、Web ブラウザのデフォルトのスタイルをリセットしたりするときに役立ちます。次の例は、すべての要素のマージンとパディングをゼロにするものです。

  • CSSソース:
    • * { margin : 0 ; padding : 0 ; }
ヒントのアイコン

Web ブラウザのデフォルトスタイルをリセットする

ここでは全称、あるいはユニバーサルセレクタを利用してリセットしています。一度ですべてをリセットできるため非常に便利です。

ただ、この方法では良いデフォルトのスタイルを無駄にしてしまう、新しいプロパティに対応できない、という問題があります。

最近の傾向では、ユニバーサルセレクタを使わず、それぞれの要素ごとにスタイルを解除する方法がとられています。

疑似クラス・疑似要素でスタイルを適用

文書の持つツリー構造によらずスタイルを適用するための仕組みのことで、:link、:hover、:before、:after などがあります。

この中で未訪問リンクを赤色表示、訪問済みリンクを灰色にするなど、操作の状況に応じた表現ができます。この二つをリンク疑似クラスと言います。

一方、ダイナミック疑似クラスと呼ばれるのがあります。それはユーザーアクションに反応して表示を変更する Web ブラウザで、その表示スタイルをコントロールする疑似クラスで、次の3つがあります。

これら疑似クラスは class セレクタや id セレクタと組み合わせて使用できるので、特定部分のリンクに別のスタイルを適用することが可能です。参照: id セレクタにするか class セレクタにするか

なお、一つのリンクに複数の疑似クラスを設定する場合は、上記の順に記述することが必要です。すなわち、:link、:visited、 :hover、 :active の順です。これはCSSのカスケード処理によって、あとに読み込まれたスタイルが優先的に取り扱われることを考慮しての順番です。

用語解説のアイコン

フォーカス

選択された状態のことですが、この選択された状態とは、キーボードの [TAB] キーでリンクをフォーカスした時です。マウスのポインターを乗せた状態 (hover)、クリックした状態 (active) とは区別されます。

フォーカスした状態は、標準で周りに点線が表示されます。

ヒントのアイコン

a:visited (訪問済み)の確認

訪問済みのスタイルを設定し、未訪問 ⇒ 訪問済みの変化の確認を行うとき、インターネット エクスプローラー (IE) の 「一時ファイル」 を削除してから行いましょう。

一時ファイルにあるかどうかで訪問済みかどうかを判断しているようです。

疑似要素については、リンク先を明示する、を参照してください。

ページトップへ

|    | 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  |