疑似クラス（Pseudo-classes）は要素が特定の状態にある場合にスタイルを指定するもので、疑似要素（Pseudo-elements）は要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加することができます。どちらもセレクタとなる要素名のあとにコロン（:）をつけて記述します。
疑似クラスと疑似要素については、Microsoft Internet Explorer の対応がまちまちであり、 Macintosh版Internet Explorer 5 では :first-letter疑似要素（対応しているが文字化けを起こす）, :before疑似要素, :after疑似要素の3つ以外は対応しているので概ね良好ですが、Windows版Internet Explorer 6 は :link疑似クラス, :visited疑似クラス, :hover疑似クラス, :active疑似クラス, :first-letter疑似要素, :first-line疑似要素だけにしか対応しておらず、さらに Windows版Internet Explorer 7 においても、:first-child疑似クラスへの対応だけに止まり、:focus疑似クラス, :lang疑似クラス, :before疑似要素, :after疑似要素の4つには対応することができなかったようで主要視覚ブラウザの中では、まだまだ CSS の対応に遅れがあるようです。
a:link { プロパティ : 値 ; }
a:visited { プロパティ : 値 ; }
a:hover { プロパティ : 値 ; }
a:active { プロパティ : 値 ; }
ユーザー（訪問者）のウェブページに対するアクションに応じてダイナミックに変化させる疑似クラスのひとつで、a要素がセレクタとなり、アンカー内容のリンクボタンに対するユーザーのアクションによって変化します。セレクタとなる要素に続けてコロン（:）をつけて既定のクラス名を指定します。クラス名には、"link", "visited", "hover", "active" の4つがあります。これらは a要素にあらかじめ既定されたクラス名であるため定義済みクラスとも呼ばれます。
この場合の :link疑似クラスは未アクセスのリンクを表し、:visited疑似クラスはアクセス済みのリンクを表し、:active疑似クラスは要素をクリックしてアクティブになっている状態を表し、:hover疑似クラスは要素にマウスポインタが合わさっている状態を表しています。順番は :link, :visited, :hover, :active の順に指定するように決められています。
a:link { color : #00f ; text-decoration : none ; }
a:visited { color : #369 ; text-decoration : none ; }
a:hover { color : #f00 ; text-decoration : underline ; }
a:active { color : #f60 ; text-decoration : underline ; }
また、p a:link { property: value; } のように子孫セレクタの記述を行えば、p要素内のリンクボタンにのみスタイルを適用することもできます。
なお :hover疑似クラスと :active疑似クラスについては、リンクに関する疑似クラスではなく、動的な疑似クラスに分類されており、a要素をセレクタとする以外にも、どのような要素もセレクタに指定することができます。ただし、Windows版Internet Explorer 6 と Macintosh版Internet Explorer 5 は a要素以外に指定された :hover疑似クラス, :active疑似クラスに対応していません。Windows版Internet Explorer 7 より対応しています。
td:hover { background : orange ; }
たとえば、td要素をセレクタにすれば、何十行にもわたる大きな表を閲覧している場合、今どのセルの部分を参照しているのかをカーソル（ポインタ）が合わさった時に背景色を変化させることで、視覚的にわかりやすくする効果があります。
a要素以外に指定された :hover疑似クラス, :active疑似クラスに対応していません。:hover疑似クラス, :active疑似クラスをすべての要素のセレクタとして指定することができます。a要素以外に指定された :hover疑似クラス, :active疑似クラスには対応していません。
要素:focus { プロパティ : 値 ; }
:focus疑似クラスは、form要素のコントロール部品となっている input要素や textarea要素などに対して、フォーカス（テキストを入力できる状態）を受け取っている時にのみスタイルを適用することができます。
input[type="text"]:focus,textarea:focus { background : pink ; }
input[type="text"]:focus のように疑似クラスや疑似要素は、様々なセレクタと組み合わせて指定することができます。
:focus疑似クラスに対応していません。:focus疑似クラスに対応していません。
要素:first-child { プロパティ : 値 ; }
:first-child疑似クラスは、指定の要素が他の要素の最初の子要素である場合にのみ、スタイルを適用することができます。
p.note:first-child { text-indent : 0 ; }
:first-child疑似クラスに対応していません。:first-child疑似クラスに対応しています。
要素:lang(言語コード) { プロパティ : 値 ; }
:lang疑似クラスは、指定の要素がどの言語コードで記述されているかによって、スタイルを適用することができます。属性セレクタを使うことでも同じ効果を出すことができますが、:lang疑似クラスの場合は下記のような場合でもスタイルを適用できます。
p:lang(fr) { color : navy ; } /* :lang疑似クラスでの指定 */
p[lang="fr"] { color : navy ; } /* 属性セレクタでの指定 */
......
<blockquote lang="fr"><p>Bonjour, Monsieur...</p></blockquote>
上記のような場合、属性セレクタによる指定では、p要素自体に直接 lang="fr" の属性値があるわけではないので、スタイルの適用対象とはなりませんが、:lang疑似クラスを使えば、p要素に直接言語コードが指定されていなくとも、UA が言語コードを判別できればスタイルの適用対象となります。
:lang疑似クラスに対応していません。:lang疑似クラスに対応していません。
要素:first-letter { プロパティ : 値 ; }
:first-letter疑似要素は、要素内のテキストの最初の1文字目だけにスタイルを適用することができます。
h1:first-letter { font-size : 180% : }
......
<h1>疑似クラス・疑似要素</h1>
h1要素内の最初のテキスト（1文字目）は「疑」であるため、「疑」の部分だけに親要素に指定されているフォントサイズより 1.8倍の指定が適用されます。
要素:first-line { プロパティ : 値 ; }
:first-line疑似要素は、行内ブロックが満たされて最初の折り返しが行われるか、または br要素で強制改行されるまでの1行目だけにスタイルを適用することができます。つまり、最初の1行目の内容がひとつの HTML の要素としてスタイルの適用対象となります。ページ幅が指定されていない状態での折り返しの場合は、表示域のサイズが変更されると、それにあわせてスタイルの適用対象となる1行目のテキスト量も増減します。
h2 { font-size : 120% ; }
h2:first-line { font-size : 150% ; }
......
<h2>悪性脳腫瘍との闘い<br />-奇跡の序章-</h2>
このサンプルでは、「-奇跡の序章-」の部分のテキストは br要素による強制改行が行われているために、h2要素をセレクタとして親要素に指定されたフォントサイズより1.2倍の指定が適用されますが、1行目の「悪性脳腫瘍との闘い」の部分には親要素に指定されたフォントサイズより計1.8倍（120% * 150%）の指定が適用されることになります。
要素:before { content : 値 ; }
要素:after { content : 値 ; }
:before疑似要素と :after疑似要素 は、contentプロパティとあわせて、指定の要素の前後に仮想的な文字列や画像を追加することができます。
a[href]:before { content : url(arrow.gif) ; }
上記のサンプルでは、リンクボタン（アンカー内容）の前に "arrow.gif" という画像を追加しています。このようにリンク部分に画像などを仮想的にレンダリング（描写）させることで、リンク部分を視覚的に目立たせて、ユーザーを誘導する効果的な利用法もあります。詳しい設定方法は、contentプロパティを参照してください。
:before疑似要素, :after疑似要素に対応していません。:before疑似要素, :after疑似要素に対応していません。:before疑似要素, :after疑似要素のどちらにも対応していません。