擬似要素と擬似クラスの違いやダブルコロンとシングルコロンの話

擬似クラス（Pseudo-classes）

擬似クラスには次のようなものがあります。何気なく使っていますが、擬似クラスという名称を知らない方も多いのではないでしょうか。

• :link
• :visited
• :hover
• :active

で、擬似クラスはCSS3で大幅に追加されました。

• E:nth-child(n)　･･･　n番目の子要素に適用
• E:nth-of-type(n)　･･･　n番目にあるE要素に適用
• E:first-of-type　･･･　兄弟関係にあるE要素で最初のものに適用

この他にもまだまだあります。これらの詳しい内容については「保存版！CSS3セレクタの説明書｜Webpark」をご参考に。

なぜ擬似クラスという名称なのか

例えば、以下のようなHTMLとCSSがあります。2番目にあるp要素にsecondというクラスが付けられています。

<style>
.second{
  color : red;
}
</style>

<p>1つ目のp要素</p>
<p class="second">2つ目のp要素</p>
<p>3つ目のp要素</p>
<p>4つ目のp要素</p>
<p>5つ目のp要素</p>

擬似クラスを使うとHTMLにクラスを指定しなくても同じような効果を出すことができます。

<style>
p:nth-child(2){
  color : red;
}
</style>

<p>1つ目のp要素</p>
<p>2つ目のp要素</p>
<p>3つ目のp要素</p>
<p>4つ目のp要素</p>
<p>5つ目のp要素</p>

HTMLにクラスを指定しなくても、クラス指定されているかのように扱うということで擬似クラスということです。たぶん。。

擬似要素（Pseudo-elements）

続いて擬似要素です。

• ::first-letter　･･･　最初に現れる文字に適用
• ::first-line　･･･　最初の行に適用
• ::before　･･･　要素の前に内容を追加
• ::after　･･･　要素の後に内容を追加

何かと便利な「before」や「after」も擬似要素です。使い方については「CSSの擬似要素を使った見出しデザイン｜Webpark」もどうぞ。

なぜ擬似要素という名称なのか

こちらもなぜ擬似要素というのか考えてみます。

下のようにH2要素の最初の１文字だけ大きくするためにspan要素で使います。

<style>
h2 span{
font-size: 24px;
}
</style>

<h2><span>サ</span>ンプル</h2>

「サンプル」という単語を区切ってしまいかっこ悪いです。というか正しいマークアップではないと思います。しかも、すべてのh2要素で最初の文字を大きくしようと思うと大変な作業になります。

擬似要素を使うとHTMLを触ることなく同じ効果を出すことができます。

<style>
h2::first-letter{
font-size: 24px;
}
</style>

<h2>サンプル</h2>

h2要素の最初の文字を要素で囲んだようにするという意味で擬似要素ということです。たぶん。。

「::before」や「::after」も元々何もないところに要素を追加するという意味で擬似要素なのだと思います。

シングルコロンとダブルコロン

擬似クラスと擬似要素の例を見てみると、擬似クラスはシングルコロン、擬似要素はダブルコロンが付いています。

擬似要素のダブルコロンはCSS3からで、CSS2までは擬似クラスと同じシングルコロンでした。

擬似クラスと擬似要素を明確に区別するため擬似要素はダブルコロンにしたのだと思います。

しかし、ここで問題です。ブラウザによってはダブルコロンに対応していない場合があります。どのブラウザかというとお察しの通りIEです。

具体的にはIE8以下ではダブルコロンに対応していません。ただ、IE6は何個コロンがあっても表示されるみたいです。

IEをどうするかは考え方色々ですが、さすがにIE8はまだ無視できないと思います。ということでダブルコロンは現状使いにくいです。

スマートフォン専用サイトだとIEは関係ないのでダブルコロンにしておいた方がいいと思います。

さいごに

ということで擬似クラスと擬似要素について考えたことをまとめてみました。

何かと便利や擬似クラスや擬似要素ですが、旧バージョンのIEはCSS3で追加されたものに対応していなかったりするので困ってしまうわけです。

擬似セレクタについては、「Selectivizr」で大部分が解決されます。使い方については「CSS3を使うにあたって知っておきたいIE対策のまとめ｜Webpark」をご参考に。

IE7でも「before」「after擬似要素」に対応するためのjQueryプラグインもあるようです。私は使ったことがないです。。

• jQuery Pseudo Plugin (:before and :after in Internet Explorer)

ということで擬似クラスと擬似要素についてまとめてみましたのでご参考になればうれしいです。