CSS 擬似要素・擬似スタイル

擬似要素・擬似スタイルとは

擬似要素

要素名や属性などでは分類できない状態に対してスタイルを設定したいときがあります。擬似要素を指定することによって、マウスが乗ったときやクリックしたときなどの表示変える事が出来ます。
擬似要素には、次の種類があります。要素に続けて記述します。

：link

まだ見て（キャッシュされて）いないページへのリンク

:visited

既に見た（キャッシュされた）ページへのリンク）

:hover

マウスが要素に乗ったとき

:active

リンク部分をクリックなどで選択した瞬間

:focus

対象がクリックされた時

:lang

（言語コード）スタイルを適用させる言語）

:hover をリンクに設定する場合は、a：link、avisited、a:hover、a:active の順に記述する必要があります。

擬似スタイル

擬似スタイルは、HTLM のツリー構造の要素では指定できない部分に対してスタイルを設定できます。例えば、ブロックレベル要素の最初の文字や最初の 1 行などが、指定できます。
擬似スタイルには、次の種類があります。要素に続けて記述します。

:first-line

ブロックレベル要素の表示上の最初の 1 行。但し、:first-letter の指定と一緒に使った場合、最初の 1 文字は、:first-letter の指定が優先されます。

:first-letter

ブロックレベル要素の最初の 1 文字。

:before

要素の直前に生成し追加される内容。content プロパティで、追加される内容を記述。IE では、未対応です。但し、:first-letter の指定と一緒に使った場合は、:first-letter の後に生成されます。

:after

要素の直後に生成し追加される内容。content プロパティで、追加される内容を記述。

CSS 擬似要素・擬似スタイルの例

絶擬似要素・擬似スタイルの例を示します。
メニューが、擬似要素の例です。マウスを乗せたりクリックしたりすると、色が変わるように擬似要素を設定しています。次の段落が、擬似スタイルです。段落の最初の文字の色と大きさ、最初の 1 行の色を擬似スタイルで変えています。次の段落では、段落の最初と最後に、擬似スタイルで追加文字を表示しています。但し、この擬似スタイルは、インターネットエクスプローラ IE では、対応していません。
サンプルを、クリックして、ご確認ください。
なお、ドキュメントタイプ( Document Type Definition 以下 DTD )の指定をしてありませんので、Web ブラウザによって、表示の位置などが変わります。全ての Web ブラウザで表示位置を合わせたい場合、DTD を指定して、DTD にあわせた CSS の指定をしてください。
サンプル：　CSS 擬似要素・擬似スタイルのサンプル
ソースコードは次の通りです。

css_quasi.css の

から下の記述は、擬似要素・擬似スタイルとは直接関係ありませんので、興味のある方はよく読んで理解してみましょう。