コーディング初心者こそ知っておきたい「CSS擬似クラス」超入門

1990年代から2000年代のいわゆるCSSの黎明期の頃には、CSSで使う構文も少なく、覚える量もそれほど多くなかったために、学習コストは今よりも非常に小さいものでした。
しかし、時代が進むにつれ、CSSでできることも非常に幅広くなり、それに合わせてCSSでさえ難しく感じてしまう人が増えてしまったのではないかと思います。

当初は「:hover」や「:active」といった代表的な擬似クラスだけを使っていけばよかったものの、今では様々な擬似クラスがあるので、初心者の方はもちろんのこと、ベテランの方であっても、CSSの擬似クラスを学び直したいと思っている方は多いはずです。

そこで本稿では、「CSS擬似クラス」について改めて理解を深めていくための基本事項をおさらいしていきます。
CSSの擬似クラスは、さまざまな仕様変更や勧告を経て、現在のものになっています。
擬似クラスを使いこなせれば、特定のオブジェクトだけをデザインしたりすることが思い通りになるので、ぜひここでおさらいをしておきましょう。

CSSの「擬似クラス」って？

CSSの擬似クラスは、セレクタ(記述している要素やクラスなど)に付加するコロン(：)付きのキーワードのことです。

element.class:pseudo-class {
　　property: value;
}

擬似クラスを使えば、セレクタに対して、特定の状態を指定することができます。

例えば、:hover擬似クラスであれば、選択した要素上にマウスカーソルがあるときに、文字色を変えたり、大きさを変えたりすることができます。
以下の例では、リンクがマウスカーソルに乗ったら、ディープピンクに変わるという挙動を表しています。

a {
　　color: blue;
}
a:hover {
　　color: deeppink;
}

擬似クラスを使えば、:visitedのように閲覧履歴の状態、:checkedのようにコンテンツの状態、:hoverのようにマウスカーソルの位置状態といった外的要因との関係についてスタイルを適用したり、*:nth-child()*のようにコンテンツの配列順序に関してスタイルを適用したりすることが可能です。

リンクの状態に関する擬似クラス

入門としてよく引き合いに出されるのが、リンクに関する擬似クラスです。
擬似クラスを使うことで、訪問済みのリンクやアクティブなリンクの色を変えたりさまざまなスタイルを付加・変更することができます。

a:link {…}

a:visited {…}

a:hover {…}

a:active {…}

a:focus {…}

意外と正しく理解されていないことが多いですが、:linkは、aタグのうちhref属性が付与されているものにスタイルを加えます。
例えば、以下のようにhref属性がないものは*:link*の対象ではありません。

<a>href属性がありません</a>

:visitedは訪問済みリンクに対して、:activeは今まさにクリックしたリンクに対してスタイルを適用します。
:hoverはマウスカーソルが上に乗っかった(ホバーした)状態のときにスタイルが適用されますが、現在ではリンク以外でも利用できます。
また、:focusはtabキーなどでリンクのフォーカスを移動した場合に適用されるスタイルを指定します。

:linkや*:visited*、:activeは同時に起こりうる可能性がありますが、その場合はブラウザごとに返される処理が変わることを留意しておきましょう。

フォームの状態に関する擬似クラス

:checked

スクリーンショット：2017年9月

チェックボックスやラジオボタンには、チェック済みの要素に対して*:checked*擬似クラスを利用することができます。

以下のように、チェックボックスとラジオボタンで使い分けることもできます。

input[type="checkbox”]:checked {…}

input[type="radio”]:checked {…}

:enabled と :disabled

次に、htmlのフォーム部品に利用不可の「disabled」を使った場合に適用できる擬似クラス*:disabledと、disabledではない状態の要素に適用できる:enabled*を紹介します。

例えば、送信ボタンが利用可能か利用不可能かによってスタイルを使い分ける場合には、以下のように行います。

input[type="submit”]:enabled {…}

input[type="submit”]:disabled {…}

:default

:default擬似クラスでは、初期状態で「checked」されているチェックボックスやラジオボタンに対してスタイルを適用することができます。
例えば、ラベル付きのチェックボックスの初期状態は、以下のように指定します。

input[type="checkbox”]:default + label {…}

注意しておきたいのは、チェックボックスやラジオボタンでチェックを外しても、:checkedと違ってスタイルが消えることはないという点です。

:focus

フォームにおける*:focus*擬似クラスでは、テキストエリアやテキストフィールドが入力中だった場合にスタイルを適用します。

input:focus, textarea:focus {…}

:required と :optional

フォーム部品に「required」をつけることで入力項目が必須になり、ブラウザによっては空欄では送信を行うことができなくなっています。
そのような入力必須部品には*:requiredを、そうではないものについては:optional*でスタイルを付加することができます。

以下は、オプショナルかつホバーしたテキストエリアのスタイルを指定するものです。

textarea:optional:hover {…}

:in-range と :out-of-range

スクリーンショット：2017年9月

:in-rangeはやや特殊な擬似クラスで、例えば次のような入力フィールドがあるとします。

<input type="number" min="1" max="10" value="8">

今、この数字の入力フィールドに対して、最小値1と最大値10が設定されています。
入力された数値がこの範囲内であればin-range、この範囲外であれば*:out-of-range*で指定されたスタイルを適用します。

:read-only と read-write

:read-onlyは「readonly」属性が付加された、いわゆる読み込み専用の、編集不可能でコピーだけができるテキストエリアなどに適用できる擬似クラスです。

<textarea name="nm" id="id" cols="30" rows="10" readonly> </textarea>

このような場合には*:read-only擬似クラスが適用されます。
一方、この擬似クラスが適用されない編集可能なフォーム部品に関しては、:read-write*を適用可能です。

:valid と :invalid

例えば、

<input type="email”>

でEメールアドレスを収集する場合に、メールアドレスの形として正しければ*:validを、そうでなければ:invalid*のスタイルを適用します。

::placeholder

::placeholderでは、テキストエリアなどの要素のプレイスホルダー部分にだけスタイルを適用することができます。

::placeholder {
　　color: #96eb7f;
　　font-family: Lato, sans-serif;
}

ページ印刷の状態に関する擬似クラス

現在ではあまり使わなくなってしまったかもしれませんが、ページ印刷に関する擬似クラスがあるので、紹介させていただきます。

ページ印刷に関する指定には、「@page」を使うという取り決めがあります。
この後に、例えば*:firstをつけることで複数の印刷ページのうち、最初のページにのみスタイルを適用することができます。
ページの最後には:last*で対応可能です。

@page:first {…}

また、:leftや*:rightを指定することで、ページの左右に対してそれぞれスタイルを適用できます。
さらに、:blank*の場合は空ページに関してスタイルを適用することが可能です。

要素の順番に関する擬似クラス

:nth-child() と :nth-last-child()

ある要素の中に複数の同一要素を入れ子にしておく場合などに、ある規則に従って特定の要素にだけスタイルを指定したい場合には、こちらが便利です。
例えば、ul中のli要素で、偶数と奇数を分けたい場合などです。

:nth-child()のカッコの中身には、整数とnの倍数(nには0か星の正数)を指定することができます。
例えば奇数の場合は、:nth-child(2n-1)や:nth-child(odd)、偶数の場合は*:nth-child(2n)や:nth-child(even)*を指定することができます。

tr:nth-child(even):hover {…}

また、*:nth-child(5)*のように、直接n番目の数を指定することもできます。

*:nth-last-child()*は終わりの要素からの順番でスタイルを適用します。
例えば、*nth-last-child(1)*であれば、常に終わりの要素だけにスタイルを適用することができます。

また、:first-childと*:last-childはそれぞれ:nth-child(1)や:nth-last-child(1)*と同じ挙動をすることを知っておくとよいでしょう。

:nth-of-type() と :nth-of-last-type()

*:nth-child()*の場合には、種類に関係なく要素を数えていきました。
一方、*nth-of-type()*の場合には、途中で別の種類の要素が入る場合にはそれを数えずに、指定した種類の要素のみを数えてスタイル適用の対象が決定されます。

また、:first-of-typeと*:last-of-typeはそれぞれ:nth-of-type(1)や:nth-last-of-type(1)*と同じ挙動をすることを知っておくとよいでしょう。

:not()

*:not()*はカッコ内に指定したもの以外での条件で適用される擬似クラスです。

例えば、段落が*:last-child*ではない場合を考えると、次のようになります。

p:not(:not(:last-child)) {…}

ただし、注意してほしいのは、*:not(:not(…))のように:not()*を入れ子にすることはできません。

その他知っておくと便利な擬似クラス

::after と ::before

::afterや*::before*はコンテンツをある要素の前後に差し込む時に使います。

例えば、リンクの後ろにリンクの鎖を意味するアイコンを設置したい場合には、次のように指定します。

a::after {
　　content: url(external-link.png);
}

::first-letter と ::first-line

スクリーンショット：2017年9月

::first-letterはテキスト要素の最初の文字、::first-lineはテキスト要素の最初の段落にスタイルを適用します。

p::first-letter {…}

::selection

スクリーンショット：2017年9月

::selectionは、マウスカーソルでテキストなどを選択してハイライトしたときのスタイルを指定することができます。

blockquote::selection {
　　background-color: #0060e6;
　　color: white;
}

まとめ

この他にもさまざまな擬似クラスが存在しますが、まずは今回ご紹介させていただいた擬似クラスをマスターするだけでも、飛躍的にデザイン効率や柔軟性は高まるでしょう。

コロンが2つ必要な擬似クラスは、1つで書いても作動はしますが、CSS3ではコロンを2つ付けるのが正しい文法となっているので注意しましょう。