まず疑似要素、疑似クラスって何？

CSSでよく使われている疑似要素と疑似クラス。
よく使われる物としては::afterや:hoverなどがありますよね。
ちなみに::afterは疑似要素、:hoverは疑似クラスとなっています。
ではそれぞれの違いについてまとめていきたいと思います。

#疑似要素とは？
「擬似要素とは、選択された要素に対してスタイルを適用することができます。」
これだといまいちわかりづらいと思いますので例をあげたいと思います。
例えば以下のように擬似要素を使わずに文字の最初の文字だけ色を変えたい場合はこうなります。

html

<h1><span>サ</span>ンプルテキスト</h1>

css

span{
 color: #f00;
}

しかし擬似要素を使えばこうなります。

html

<h1>サンプルテキスト</h1>

css

h1::first-letter{
 color: #f00;
}

無駄なspanタグを記述しなくてよくなりました。
このように選択された要素の特定の部分を指定して修飾するものを擬似要素と言います。
ちなみにCSS3から疑似要素は疑似クラスとの区別をつけるためにコロンを２つ付けるようになりました。
(ですが１つでも表示はされます。)

##どんな擬似要素があるか

::before
::after
::first-letter
::first-line

など

実際に擬似要素を適用させたのがこちら

See the Pen Pseudo-elements by taka (@gb-sweep) on CodePen.

#疑似クラスとは？
擬似クラスは選択される要素の特定の状態の時にスタイルを適用させるものです。
こちらはまだわかりやすいとは思いますがもう少しわかりやすく説明するならば、
よく使われるa:hoverがあると思います。リンクをホバーした際にそのスタイルが適用されます。
このようにaの要素にカーソルが合わさった(特定の状態)時にスタイルが適用されるものが擬似クラスといいます。

##どんな擬似クラスがあるのか

:hover
:active
:checked
:nth-child(n)

など

実際に擬似要素を適用させたのがこちら

See the Pen Pseudo-classes by taka (@gb-sweep) on CodePen.

#最後に
擬似要素と擬似クラスについて書かせていただきました。
今回紹介させていただいた擬似要素と擬似クラス以外にもたくさんのものがありますのでそれらを活用していけば様々な表現をすることができると思います。
また「CSSだけで描いてみたシリーズ」でもよく使われていますのでもし興味のある方は、これらの擬似要素や擬似クラスを使ってCSSだけで何か描いてみるのも面白いかもしれません。

##共に働くWebエンジニアを募集しています!
不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくはWantedlyからお問い合わせください。