CSSリファレンス擬似クラスと擬似要素の違いと使いかた

擬似クラス・擬似要素は便利ですよね〜
レガシーブラウザをシカトすればかなり柔軟でユニークなサイトが簡単に作れてしまいます。
今回はその擬似クラス・擬似要素について解説します。

◆目次

はじめに擬似クラスと擬似要素のちがいについて

はじめに概要として擬似クラスと擬似要素の違いについて説明します。

擬似クラス

擬似クラスは、もうおなじみの:hoverや:linkなどです。
CSS2では種類もできることもそんなに多くはなかったのですが、CSS3で大幅に増えました。

擬似クラスは要素の全体を指定し影響をあたえることができます。
要素の全体を指定できるところが注目すべきところですね。

擬似要素

擬似要素は:first-letterや.clearfixでおなじみですね。

＊:first-letterはテキストの頭の文字を大きくするやつです。

.clearfix:after{
	content: ""; 
	display: block; 
	clear: both;
}
.clearfix {
	zoom:1;
}

このように指定しますね。
ここでは:afterが擬似要素です。

擬似要素はCSS3で:（シングルコロン）から::（ダブルコロン）に変更されました。
おそらく擬似クラスと区別するためだと思われます。

http://www.w3.org/TR/2011/REC-CSS2-20110607/selector.html#pseudo-elements

しかし、ここで問題があります。
この::（ダブルコロン）に対応していないブラウザがあります。

そうです。Internet Explorerです。
具体的にはIE8以下では::（ダブルコロン）に対応していません。
ただ、IE6は何個コロンがあっても表示されるみたいです。
ちょっと意味わかりませんが・・・
IE8の対応をする場合は:（シングルコロン）で記述しスマホでは::（ダブルコロン）のような対応が無難かと思います。

擬似要素は要素の一部を指定し変化させることができます。
通常、一部だけ変化させる場合htmlを触らなければなりませんが、htmlを触らず要素の一部にスタイルを適応できます。

IEでの擬似セレクタと擬似要素

擬似セレクタに関してはSelectivizrで大方解決できます。

擬似要素はjQuery Pseudo Pluginってのがあるらしいですが僕は使ったことないです。

擬似クラスの種類と使い方

一番使う？＜a＞につける系擬似要素

まずは最もよく使うと思われる:link、:visited、:hover、:activeの4つの擬似クラスについて説明します。
これら4つの擬似クラスはa要素を対象として一緒に使われることが多くよく使われます。
最近ではCSS3のtransitionプロパティと合わせてCSSアニメーションを実装できます。

:hoverなんかはtransitionと組み合わせるとかなり面白いアニメーションが簡単にできます。

今回は最もオーソドックスな指定の仕方をご紹介します。

a:link {
}
a:visited {
}
a:hover {
}
a:active {
}

上記のように記述します。
順番も:link:visited:hover:activeの順番で記述しないと正常にスタイルされません。

:link	リンク先に未訪問の場合に適応されます。
:visited	リンク先に訪問済みの場合
:hover	マウスオーバーした際
:active	リンクがアクティブな時。クリックした時など

その他の擬似クラス

擬似クラスは実はこんなにあります！

CSS2.1までで定義されているものはこちら

上記の擬似クラスも含む

:first-child	親要素から見て一番目の直下要素のみを対象とする擬似クラスです。
:focus	要素にフォーカスを合わせている状態のみ対象とする擬似クラス`input`等に使用します
:lang	要素に対して文章の言語指定を行う擬似クラス`lang="ja"`などと指定します

:target	リンクのターゲット先となる要素にスタイルを適用する際に使用します。 `#foo`等アンカーリンク先にスタイルを適応する
:root	ルート要素にスタイルシートを適用するためのセレクタです。ルート要素とは最上位階層に位置する要素のことで、HTML文書では全体をマークアップしているがルート要素のことです。
:nth-child(n)	ある要素の隣接している子要素を最初から数えて、n番目にあたる要素にスタイルを適用します。
:nth-last-child(n)	後ろから数えてn番目の子となる要素にスタイルを適用する際に使用します。
:nth-of-type(n)	n番目のその種類の要素にスタイルを適用する際に使用します。 `:nth-child(n)`との違いは`:nth-child(n)`は種類に関係なく数えます。`:nth-of-type(n)`では指定した要素の種類以外はカウントしません。
:nth-last-of-type(n)	後ろから数えてn番目のその種類の要素にスタイルを適用する際に使用します。 `nth-of-type(n)`と同様に特定の種類飲みカウントします。
:last-child	子として最後の要素にスタイルを適用する際に使用します。
:first-of-type	最初のその種類の要素にスタイルを適用する際に使用します。
:last-of-type	最後のその種類の要素にスタイルを適用する際に使用します。
:only-child	子として唯一となる要素にスタイルを適用する際に使用します。
:only-of-type	子として唯一となるその種類の要素にスタイルを適用する際に使用します。
:empty	素内がテキストや空白などを含め空の場合に適用されるセレクタです。
:not(s)	sで指定するセレクタに当てはまらないE要素にスタイルを適用する際に使用します。
:enabled	有効となっているユーザーインターフェース要素にスタイルを適用する際に使用します。ここで言うユーザーインターフェイスとはフォーム部品などのユーザーが操作できる要素のことです。
:checked	チェックされているユーザーインターフェース要素にスタイルを適用する際に使用します。ラジオボタンやチェックボックスに使用します。

擬似要素の種類と使い方

上記で書いたように::をつけます。

::before	要素の直前に内容を挿入する際に使用します。
::after	要素の直後に内容を挿入する際に使用します。
::first-letter	レベル要素の最初の文字を対象にスタイルを適用します。インライン要素には適用できないので注意してください。
::first-line	ブロックレベル要素の最初の行を対象にスタイルを適用します。インライン要素には適用できないので注意してください。
::selection	文書内でユーザがハイライトした部分（マウスやその他のポインティングデバイスで選んだ部分）にルールを適用します。