CSSの擬似クラスと擬似要素の使い方を覚えよう

cssの「:hover」等の「擬似（ぎじ）クラス」と「::before」等の「擬似要素」の使い方を覚えていきましょう。

擬似クラスとは？

擬似クラスは、要素が特定の状態の時にスタイルを変更することができます。

例えば、要素にマウスを乗っけた時と離した時で、文字の色や大きさを変更するといったことができます。特に、ユーザビリティ（使い勝手）の向上の為によく使われます。

擬似クラスの種類と使用方法

擬似クラスの使い方は、指定したいセレクタの後に「:(コロン)擬似クラス」とします。以下のようになります。

使用例：CSS

a:link{
  color:#CCC;
}

次に、主な擬似クラスをご紹介します。

:link

link擬似クラスは、「未訪問のリンクのスタイル」を指定することができます。

:visited

visited擬似クラスは、「訪問済みのリンクのスタイル」を指定することができます。

:hover

hover擬似クラスは、「マウスのカーソルが要素に乗った時のスタイル」を指定することができます。

:active

active擬似クラスは、「要素がアクティブ（リンクの場合は、クリックされてからマウスを離すまでのスタイル）なときのスタイル」を指定することができます。

使用例：HTML

<a href="#">疑似クラス</a>

使用例：CSS

a:link{
  color:blue;
}
a:visited{
  color:purple;
}
a:hover{
  color:#CCC;
}
a:active{
  color:red;
}

使用例：ブラウザ

他にもたくさんの擬似クラスが存在しますが、最も多く使用するのは:hoverだと思います。特に、リンクであることを示す際にはよく使われます。一方で、スマートフォンではhover（ホバー、マウスオーバー）という概念がありませんので、注意が必要です。

擬似要素とは？

擬似要素は、擬似クラスが要素の特定の状態のスタイルを変更するのに対し、特定の部分に変更を加えたい時に使用します。

例えば、以下のようなHTMLがあるとします。

使用例：HTML

<p>この文章は、段落です。この文章は、段落です。この文章は、段落です。<br>
この文章は、段落です。この文章は、段落です。この文章は、段落です。<br>
この文章は、段落です。この文章は、段落です。この文章は、段落です。</p>

これに、擬似要素である「::first-line」を適用すると、最初の行のみにスタイルを指定することができます。

使用例：CSS

p::first-line{
  color:red;
  text-decoration:underline;
}

結果はこのようになります。

使用例：ブラウザ

このように、特定の部分に変更を加える必要がある際に使用します。

擬似要素の種類と使用方法

主な擬似要素を見ていきましょう。

::before

特定の要素の最初に子要素として擬似要素を作ることができます。

::after

特定の要素の最後に子要素として擬似要素を作ることができます。

::first-line

特定の最初の行にスタイルを指定することができます。

::first-letter

特定の最初の行の最初の文字にスタイルを指定することができます。

※擬似クラスと違い擬似要素ではコロンを２つ書きます。

これはCSS3というバージョンで、お互いを区別できるように導入されました。ブラウザによっては、１つのコロンでも表示されますが正式には２つ書く必要があります。

5.理解するポイントまとめ

• 擬似クラスとは特定の状態時のスタイルを指定できる。
• 擬似要素とは特定の要素に対してスタイルを指定できる。
• 擬似クラスは:(コロン)が1つ、擬似要素は2つ。