疑似クラスは要素が特定の状態にある場合にスタイルを指定するもので、疑似要素は要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加することができます。どちらもセレクタとなる要素名のあとにコロン（:）をつけて記述します。
疑似クラス・疑似要素については、Internet Explorer の対応がまちまちであり、Mac版Internet Explorer 5 では、:first-letter疑似要素（対応しているが文字化けを起こす）, :before疑似要素, :after疑似要素の 3つ以外は対応しているので概ね良好ですが、Win版Internet Explorer 6 は :link疑似クラス, :visited疑似クラス, :hover疑似クラス, :active疑似クラス, :first-letter疑似要素, :first-line疑似要素だけにしか対応しておらず、最新バージョンである Win版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, :hover, :active の4つの疑似クラスは「定義済みクラス」とも呼ばれます。
「: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要素以外にも、どのような要素でも指定することができます。ただし、Win版Internet Explorer 6・Mac版Internet Explorer 5 ともに a要素以外に指定された :hover疑似クラス, :active疑似クラスには対応しておらず、Win版Internet Explorer 7 のバージョンより対応しています。
td:hover { background : orange ; }
たとえば、td要素をセレクタにすれば、何十行にもわたるような大きな表を閲覧している場合には、今どのセルの部分を参照しているのかをポインタ（カーソル）が合わさった時に背景色を変化させることで、わかりやすくする効果があります。
要素:focus { プロパティ : 値 ; }
:focus疑似クラスは、form要素のコントロール部品となっている input要素や textarea要素などに対して、フォーカス（テキストを入力できる状態）を受け取っている時にのみスタイルを適用することができます。
input[type="text"]:focus,textarea:focus { background : pink ; }
「input[type="text"]:focus」のように疑似クラスや疑似要素は、様々なセレクタと組み合わせて指定することができます。
※Win版Internet Explorer バージョン6,7 は対応していません。
要素:first-child { プロパティ : 値 ; }
:first-child疑似クラスは、指定の要素が他の要素の最初の子要素である場合にのみ、スタイルを適用することができます。
p.note:first-child { text-indent : 0 ; }
※Win版Internet Explorer 6 は対応していません。Win版IE7 より対応しています。
要素: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要素に直接言語コードが指定されていなくとも、ブラウザが言語コードを判別できるので、スタイルの適用対象となります。
※Win版Internet Explorer バージョン6,7 は対応していません。
要素:first-letter { プロパティ : 値 ; }
:first-letter疑似要素は、要素内のテキストの最初の1文字目だけにスタイルを適用することができます。
h1:first-letter { font-size : 180% : }
......
<h1>疑似クラス・疑似要素</h1>
h1要素内の最初のテキスト（1文字目）は「疑」であるため、「疑」の部分だけに親要素のフォントサイズより 1.8倍の指定が適用されます。
※Mac版Internet Explorer 5 は対応しているようですが、要素内の最初のテキストに半角アルファベット以外が使用されている場合は、文字化けを起こす実装となっています。
要素:first-line { プロパティ : 値 ; }
:first-line疑似要素は、行内ブロックが満たされてウィンドウサイズにあわせて最初の折り返しが行われるか、br要素で強制改行されるまでの1行目だけにスタイルを適用することができます。つまり、最初の1行目の内容がひとつの HTML の要素としてスタイルの適用対象となります。折り返しの場合は、ブラウザのウィンドウサイズ（表示域）が変更されると、変更されたサイズにあわせて、スタイルの適用対象となる1行目のテキスト量も増減します。
h2 { font-size : 1.2em ; }
h2:first-line { font-size : 150% ; }
......
<h2>悪性脳腫瘍との闘い<br />～奇跡の序章～</h2>
このサンプルでは、「～奇跡の序章～」の部分のテキストは br要素による強制改行が行われているために、h2要素をセレクタとした親要素のフォントサイズより 1.2倍の指定が適用されますが、1行目の「悪性脳腫瘍との闘い」の部分には親要素のフォントサイズより計1.8倍（1.2em * 150%）の指定が適用されることになります。
要素:before { content : 値 ; }
要素:after { content : 値 ; }
:before疑似要素と :after疑似要素 は、contentプロパティとあわせて、指定の要素の前後に仮想的な文字列や画像を追加することができます。
a[href]:before { content : url(arrow.gif) ; }
上記のサンプルでは、リンクボタン（アンカー内容）の前に "arrow.gif" という画像を追加しています。このようにリンク部分に画像などを仮想的にレンダリング（表示）させることで、リンク部分を視覚的に目立たせて、ユーザーを誘導する効果的な利用法もあります。詳しくは、contentプロパティを参照してください。
※Win版Internet Explorer バージョン6,7、Mac版Internet Explorer 5 は対応していません。