blog

CSSの疑似要素・疑似クラスを使いこなす

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

コロン(:)がついたCSSの書き方って見たことないです?

「a:hover」などですね。

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

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

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

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

この記事では疑似要素と疑似クラスを特に区別せずに紹介していきますが、もしご自身で調べたいときには以下を参考にしてください。

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

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

ちなみに疑似要素はコロンを2重に書いて表示する場合と、コロンが1つだけで表示する場合とありますが、今のところはどちらでも正しく動きます

例) ::before :before どちらでもOK
※もしかすると将来は疑似要素はコロン2重じゃないと動かなくなる可能性も無きにしも…です

この記事では区別できるように、疑似要素はコロン2つで記述していきますね。

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

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

:link :visited :hover :active

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

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

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

CSSを書くときは :link :visited :hover :active の順に記述するようにしましょう。そうするとバッティングしてCSSがうまく効かない、といった問題になりづらくなります。

LoVe and HAte と覚えるそうです

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

:nth-of-type()

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

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

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

:nth-of-type(2)
⇒ なら先頭から番目の要素

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

:nth-last-of-type(2)
⇒ なら後ろから番目の要素

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

:nth-of-type(3n)
⇒ なら3の倍数の順番の要素
似た疑似要素に :nth-child() がありますが、ここでは :nth-of-type() を勧めます。理由はサンプルの項で説明しますね。

::before ::after

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

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

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

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

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

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

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

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

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

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

最近は「EFO(フォーム最適化)」といって、いかに送信(コンバージョン)率を上げていくか、といった手法も注目されてきていますので、フォーム制作をマスターすることもスキルの差別化に繋がります。

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

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

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

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

奇数・偶数でCSSを変える

見出し
1
2
3
4
5
6
7
8
/* 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 と入れると「2の倍数」だけにCSSが適用されます。
また、 2n+1 とすると、2の倍数+1、つまり奇数だけにCSSが適用されます。

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

:○○-child() と :○○-of-type() の違い
どちらも似たような効果になるのですが、:○○-child() だと指定された要素以外の要素(今回であればh4)が同じ階層(兄弟要素)にあるとうまく動きません。
h4を一つ目の要素としてカウントするため、奇数偶数がずれてしまうためです。
:○○-of-type() であれば指定された要素だけでカウントしてくれますので特に理由がなければ、:○○-of-type() を使いましょう
(IE8以下に対応するような特殊な件でなければブラウザも対応しています)

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

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

見出し
1
2
3
4
5
6
7
8
/* 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;
}
こちらも、:○○-child と :○○-of-type と種類がありますが、先ほどと同じ理由で :○○-of-type を使いましょう。
(試しに上記サンプルで、 :first-of-type を :first-child に変えてみると分かりますよ)

ふきだしをつくる

/* 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;
}

疑似要素で四角を作り、その2辺(今回は右辺と下辺)だけ線をつけて、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を当てることができる、ということは頭の片隅に置いておいてください。