擬似クラスと擬似要素を組み合わて用いる

Updated / Published

ポインタがあわさったときのアクション（:hover擬似クラス）に応じて擬似要素の生成内容を変化させたいといった擬似クラスと擬似要素の両方を同時に組み合わせたセレクタを用いたいことがあるかもしれません。そのような際には、擬似クラス、続いて擬似要素の順にセレクタを記述します。なお、擬似要素はCSS3仕様では擬似クラスと区別するために::とコロンを2つ続けて前置しますが、IE8はCSS2仕様にのみ適合でCSS3仕様には対応していないため、解説にはCSS2仕様の擬似クラスと区別がない擬似要素の記法を用いるものとします。

たとえば、生成内容に閉じの二重山括弧「≫」をリンクの文頭にしていたものをポインタがあわさったときのアクション（:hover擬似クラス）で、文末の位置までアニメーションさせたい場合は次のように記述します。

/*生成内容用に
文頭と文末にスペースを設ける*/
a{
	padding :  0 1em ;
	position : relative ;
}
/*文頭の生成内容*/
a:before{
	content : "\226B" ;
	color :  #666 ;
	position : absolute ;
	top : 0 ;
	left : 0 ;
}
/*ポインタがあわさったときのアクション
およびIE8用フォールバック*/
a:hover:before{
	left : auto ;
	right : 0 ;
}
/*IE9以上および、transition対応の場合は
アニメーションさせる*/
html:root a:hover:before{
	right : 1em ;
	-webkit-transform : translate(1em, 0) ;
	-ms-transform : translate(1em, 0) ; /* for IE9 only */
	transform : translate(1em, 0) ;
	-webkit-transition : -webkit-transform 0.3s ease ;
	transition : transform 0.3s ease ;
}

間をすり抜けるアニメーションは不細工なので、あえて間をすり抜けないようなアニメーションにしています。Safariで擬似要素を対象にしたCSSアニメーション(transitionまたはanimation)に対応しているのはSafari 6.1, およびSafari 7.0+になります。Safari6.0以下は対応していません。

なお、サンプルのコードのようにCSSファイルにASCII文字列以外を含める場合は、16進表記のUnicodeへエスケープしておくとUAが文字エンコーディングを決定する際に間違った解釈をして文字化けすることがあるのを回避できます（詳しくはcontentプロパティを参照）。