疑似要素・疑似クラスって？

コロン（:）がついたCSSの書き方って見たことないです？

「a:hover」などですね。

このコロンが付いた書き方が「疑似要素」もしくは「疑似クラス」となります。

この違いですがここでは特に気にせず、どちらも大まかには
「CSSのセレクタにさらに特定の条件を追加で指定できる」
という書き方で覚えてもらえれば大丈夫です。

例えば先ほどの「a:hover」は、「aタグにマウスカーソルを乗せると文字色を変える」などの指定ができましたね。
それ以外にもマウスカーソルが乗ったときだけ下線を付けたり、背景色を変えたり、などCSSで指定できることはなんでもできました。

このように、指定したセレクタがさらに特定の条件に合致したときだけCSSを追加で適用する、ということができるようになるのが疑似要素・疑似クラスになります。

【疑似要素の一覧　参考サイト】
疑似要素 (Pseudo-elements) – CSS: カスケーディングスタイルシート | MDN

【疑似クラスの一覧　参考サイト】
擬似クラス – CSS: カスケーディングスタイルシート | MDN

では疑似要素や疑似クラスを使うとどんなことができるのか？
まずはよく使われる疑似要素・疑似クラスについて説明しますね。

よくつかう疑似要素・疑似クラス

:link　:visited　:hover　:active

a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }

aタグとbuttonタグで使用され、その要素の状態によってCSSを当ててくれる疑似クラスです。

:link は未訪問のリンク、:visitedは訪問済みリンク、:hover はマウスを乗せたとき、:active はクリック済み のときに適用されます。

【参考サイト】
:link、:visited、:hover、:active の記述順序とその覚え方 – jmblog.jp

:nth-of-type()

CSSでは該当するタグやclassが複数あった場合、全部にCSSが当たりますよね。

ですがたまにはその中の一つだけにCSSを当てたい、といったことも起こります。
そんなときに使うのが :nth-of-type() です。

使い方は疑似クラスの後ろにカッコで数字を入れると、その順番のものだけにCSSが当たります。

ちなみに後ろから○番目、としたい場合は :nth-last-of-type() という疑似クラスもあります。

また、○の倍数、という指定なども出来ますので、奇数偶数や3の倍数など複雑な指定もOKです。

::before　::after

HTMLには書かれていない「要素もどき」をCSSで作ることができる機能です。

指定した要素の一番前か一番後ろに本来は存在しなかった文字や要素を追加できます。

また追加した疑似要素に positionプロパティなどを当てて位置調整などすることでさまざまなデザインをCSSだけで再現できるようになります。

【余談】フォームで使える疑似クラス

今回のサンプルは上記で紹介したものでほぼ作れるようになります。

ですが疑似クラスでかなりの数を占めているのが実はフォームに関するものなのです。

例えば、入力中のテキストボックスだけCSSを変えたり、ラジオボタンやチェックボックスが選択されているものだけCSSを変えたりできます。

また、入力した数値が規定を超えている場合だけCSSを変えたり、入力必須な項目だけCSSを当てたりなどバリデーション（入力チェック）に使えそうなものもあります。

ここのサイトが詳しいため、フォームを作り込む機会があればこちらを参考にしてみてください。

【参考サイト】
フォーム要素の擬似クラス | GRAYCODE HTML&CSS

【参考サイト】
EFO（入力フォーム最適化）って？フォームを改善して売上を上げるための20のテクニック｜ferret [フェレット]

他にも疑似要素や疑似クラスはいろいろなものが用意されているのですが、まずはこのくらいで次にすすみましょうか。

ではこれらを使った「便利なテクニック」や「実装していて楽しいテクニック」をご紹介していきますね。

便利な疑似要素・疑似クラスの使い方

奇数・偶数でCSSを変える

/* HTML */
<div>
  <h4>見出し</h4>
  <div class="section__item">1</div>
  <div class="section__item">2</div>
  <div class="section__item">3</div>
  <div class="section__item">4</div>
  <div class="section__item">5</div>
  <div class="section__item">6</div>
  <div class="section__item">7</div>
  <div class="section__item">8</div>
</div>

/* CSS */
.section__item:nth-of-type(2n) {
    background: #ffaeae;
}
.section__item:nth-of-type(2n+1) {
    background: #fff;
}

:nth-of-type() に 2n と入れると「２の倍数」だけにCSSが適用されます。
また、 2n+1 とすると、2の倍数+１、つまり奇数だけにCSSが適用されます。

※偶数は(2n)ではなく(even)と入れてもOKです。奇数は(2n+1)でなくても(odd)でもOKです

最初・最後の要素だけCSSを変える

先ほどの :nth-of-type() でも可能ですが、専用の疑似クラスもあります。
特に最後の要素は状況によって何番目なのか変わることがあると思いますので、:last-of-typeは重宝します。

/* HTML */
<div>
  <h4>見出し</h4>
  <div class="section__item">1</div>
  <div class="section__item">2</div>
  <div class="section__item">3</div>
  <div class="section__item">4</div>
  <div class="section__item">5</div>
  <div class="section__item">6</div>
  <div class="section__item">7</div>
  <div class="section__item">8</div>
</div>

/* CSS */
.section__item:first-of-type {
    background: #cc3333;
}
.section__item:last-of-type {
    background: #3333cc;
}

ふきだしをつくる

/* HTML */
<div class="box"></div>

/* CSS */
.box {
    position: relative;
    background: #f13d63;
    height: 70px;
    width: 400px;
    margin-bottom: 20px;
}

.box::after {
    content: '';
    display: block;
    position: absolute;
    border-top: 20px solid #f13d63;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    bottom: -20px;
    left: 50%;
    margin-left: -15px;
}

疑似要素の ::before　::after　を使うと、このような加工が簡単にできるようになります。

また、疑似要素を活用するとこのふきだしのように見出しをおしゃれにデザインするのもCSSだけでカンタンにできるようになります。
こちらも参考にしてみてください。

【参考サイト】
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

ボタンの横に矢印を付ける

ボタンの右側に矢印がついているのは定番ですね。

矢印が右向きに付いていることで、押すとリンクして別ページに移動することが感覚的に分かりやすくなります。

/* HTML */
<a class="button">これはボタン型のリンクです</a>

/* CSS */
.button {
    display: inline-block;
    padding: 0.8em 3em;
    padding-right: 3.2em;
    background: #333;
    border: 2px solid #333;
    font-size: 16px;
    color: #fff;
    border-radius: 10em;
    cursor: pointer;
    position: relative;
}

.button::after {
    content: "";
    display: block;
    width: 0.6em;
    height: 0.6em;
    margin: auto;
    border: 2px solid;
    border-top: 0;
    border-left: 0;
    transform: rotate(-45deg);
    position: absolute;
    right: 1.2em;
    top: 0;
    bottom: 0;
}

疑似要素で四角を作り、その２辺（今回は右辺と下辺）だけ線をつけて、45°回転させて矢印を表現しています。

CSSで疑似要素を使うと、実はかなりいろいろな図形を表現できたりします。他の例もご紹介しますね。

ハートをつくる

これも画像を使わずにCSSだけで書いたものになります。

他にもいろいろな疑似要素テクニックを公開しているサイトがありますので、ぜひご参考ください。

【参考サイト】
The Shapes of CSS | CSS-Tricks

最初の文字だけ大きくする

/* HTML */
<p>最初の文字だけ大きくしています。<br>改行しても最初の一文字目だけしか効きません。</p>

/* CSS */
p::first-letter {
    font-size: 240%;
}

色を変えたりフォントや背景色を変えるなど、アイデア次第でいろいろできますね。

文字を選択反転させたときの色を変える

文字を選択したときの色などもCSSでカスタムできるんです。

/* HTML */
<p id="select">この文字列は選択すると特殊なスタイルになります。</p>
<p>この文字列はいつも通りです。</p>

/* CSS */
#select::selection {
    color: gold;
    background: red;
}

疑似要素・疑似クラスまとめ

疑似要素や疑似クラスについて、便利さや面白さは伝わりましたでしょうか？

使いこなせるようになると今までよりもたくさんできることが増えてコーディングがより面白くなればいいなあと思います。

CSSにはただセレクタで指定したものに当てる以外に、さまざまな条件を指定してCSSを当てることができる、ということは頭の片隅に置いておいてください。