CSSの疑似要素と疑似クラスをもう一度最初から
先日FlickrがIE7とFirefox3.6をサポート対象外にするという発表がありました。IE7もシェアが少なくなって来ていますし、IEの自動アップデートが今年から開始されるので最新のブラウザへの移行も進みそうです。
IE7をサポートから外せば結構色々な事ができるようになります。例えば:before, :after疑似要素(pseudo-elements)がIE8以上では使えるようになります。今回はこの疑似要素とはなんぞやというところから、疑似要素と疑似クラスの違い、そして実際に使えるTipsをいくつかご紹介します
疑似要素(pseudo elements)とは
疑似要素と言われてもちょっとピンと来ないかもしれませんが、:first-letterやclearfixで使われてるやつと言われれば「ああ、あれか！」と思う方は多いはず。
.clearfix:after{
content: "";
display: block;
clear: both;}
.clearfix {zoom:1;}
clearfixで使われている:afterが疑似要素です。他にも以下のような疑似要素があります。
- :before疑似要素
- :after疑似要素
- :first-letter疑似要素
- :first-line疑似要素
このうち:fiirst-letterと:first-lineは(マイナーなバグはありますが)IE6でも動くので使った事のある方も多いのではないでしょうか。例えば、文頭の1文字目を大きくするドロップキャップを実現するには:first-letterを使うことで実現出来ます。
p:first-letter {
font-size: 2em;
}
:beforeと:after疑似要素はIE7までは非対応です。IE8からようやく使えるようになりました。
疑似クラス(pseudo classes)とは
一方、疑似クラスというと、こちらはおなじみの:hoverや:linkなどです。
疑似クラスはCSS2まではそれほど数も多くなかったのですが、CSS3になってから一気に増えました。疑似クラスを含め、CSSのセレクタはCSS Happy Zeroさんのところが素敵にまとめられているのでオススメです。
疑似要素/疑似クラスの二つの違いは？
疑似要素、疑似クラスって名前がややこしいですね。二つの違いはどのような所にあるのでしょうか。
疑似クラスは要素全体を選択
a:hover {color: #FFF}
div:first-child { color:#666;}
textarea:disabled {background: #666;}
上のコードを見てもらえば分かる通り、疑似クラスは(マウスオーバーした時、テキストエリアがdisabledの時のように)要素の状態を選択条件として指定することができます。どの疑似クラスも要素全体を選択していることに注目です。
疑似要素は要素の一部を選択
p:first-line {color: #FFF}
p:first-letter {color: #999}
a:after {content : "#";}
一方、疑似要素は「最初の一文字」や「最初の一行」のように要素の全体ではなく、その一部分を選択していることがわかります。「(セレクタが)選択しているのが要素の一部分なのか、それとも要素全体なのか」というのが疑似要素と疑似クラスの大きな違いになります。
疑似要素で:beforeと::beforeって2つの書き方をみかけるけど、何が違う？
実はこれCSSのバージョンの違いによって書き方が違うのです。疑似要素はCSS2まではコロンが一つでしたが、CSS3になってコロンが二つになりました。ただし疑似クラスはCSS3でもコロンが1つということを注意しましょう。
/*-- CSS2 --*/
.sample:before {}
.sample:after {}
.sample:first-child {}
/*-- CSS3 --*/
.sample::before {}
.sample::after {}
.sample:first-child {}
CSS3ではコロンの数によって疑似要素なのか疑似クラスなのかが分かりやすくなります。おそらくCSS3では疑似クラスも疑似要素も数が増えてしまい両者が区別がしにくいので、それを区別するためにこのようなシンタックスになったのでしょう。
ここで気になるのはブラウザの対応状況ですが、結論から言ってしまうとコロン2つの書き方は現状ではやめておいたほうが無難です。何故ならばIE8がコロン二つのCSS3の書き方に対応してないからです。またおまえか！IEぃぃぃ！
他のChromeやFirefoxなどモダンブラウザではコロン二つの書き方に対応しています。
:before, :after疑似要素で生成できるもの
:before, :afterは位置の指定だけなので、実際に生成する内容はcontentプロパティを用いて指定します。contentプロパティで表示できるものは大きく分けて以下3つ。
- テキスト
- 属性の値
- 画像
具体的な書き方は下記
/*-- sample1 文字を表示 --*/
.sample1:before {
content:"文字もじText";
}
/*-- sample2 画像を表示 --*/
.sample2:before {
content:url(arrow.gif);
}
/*-- sample3 属性値の表示 --*/
a:after {
content : "（" attr(href) "）" ;
}
テキストはそのまま表示されるけど、実体参照を用いて特殊記号などを表示する時は要注意です。例えばコピーライトの©マークはcontent:"©";と書いても表示されません。どうやら数値実体参照の16進数表記にしてなおかつ数手踏まないとダメらしいです。contentプロパティで実体参照を使う時は注意しましょう。
他には↓こんな使い方もできます…
始まりの話
夜明け前に
本棚からみつけた写真
/*-- sample4 カウンターの表示 --*/
h2 {
counter-increment : chapter ;
}
h2:before {
content:"第" counter(chapter) "章" ;
color:#666;
font-size:80%;
padding-right:10px;
}
使い方によっては結構便利かもしれませんね。
:before, :afterで生成される場所
次のようなHTMLとCSSがある場合、疑似要素で生成される場所を考えてみましょう。
090-5555-3XXX
.phone-num {
border:1px solid #39C;
padding:5px;
color:#006699;
}
.phone-num:before {
content:"\00260e";
font-size: 120%;
color:#000;
}
図にある通り:beforeで生成される場所はpタグの最初のテキストの直前に生成されます。afterであれば最後のテキストの後ろに生成されることを覚えておきましょう。
まとめ
疑似要素、疑似クラスともに非常に便利なセレクタです。特に:before,:after疑似要素はボックスを生成できるので色々な表現や使い方が考えられるようになりました。例えば疑似要素とCSSのみで画像を一切使わない Pure CSS GUI iconsというのもあります。
:before, :after実際の使いどころは？
:before, :after疑似要素はIE8以降でないと使えないという弱点があるので、企業サイトでは使いどころが難しいかもしれませんが、スマートフォンサイトでは問題無く使えるので今から覚えておいて損は無いですね。プログレッシブエンハンスメントの考えに理解のあるクライアントだったらPC版Webサイトのクリティカルでない部分に使ってみてもいいと思います。
