【初心者向け】CSSの疑似クラスの使い方を解説

「CSSの疑似クラスがよくわからない」

こう思う方も多いのではないでしょうか。

本記事をお読みいただくと以下が分かります。

少しずつコーディングに慣れてくるとよく耳にする「疑似クラス」。ただ、説明文だけ読んでも理解は非常にしづらいと思います。

本記事では具体例を中心に説明しますので、是非本記事をお読みいただき理解を深めてください。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

CSSの疑似要素とは

疑似クラスの説明の前に、疑似要素について解説します。擬似要素とは、要素の一部に対してスタイルを適用する方法です。

早速具体例を見ていきましょう。以下のように1文字目の「1」だけを緑字にしてみましょう。

まず疑似要素を使わない場合、以下の書き方になります。

<h3><span>1</span>文字目を装飾します</h3>

h3 span {color:green;}

スタイルを変更したい「1」をspanタグで囲い、colorをgreenに指定しています。

もちろんこの書き方でも合ってはいるのですが、いちいちCSSに適用したい内容を書き加える必要があり、コードのメンテナンスが非常に煩雑になってしまいます。

webサイトのコンテンツ自体がまだ少ないタイミングでは修正量も少ないので上記で説明した書き方でも問題ないですが、コンテンツが増えてきたり、サイト設計に関わる人が増えてくると一律の方法で修正をすることが非常に難しく、コストも莫大になります。

可能な範囲で、汎用的な書き方を心がけましょう。

それでは、ここに疑似要素を使ってみましょう。

<h3>1文字目を装飾します</h3>

h3::first-letter {color:green;}

このように、「1文字目」という要素を「first-letter」という書き方で指定でき、これを疑似要素といいます。

疑似要素はコロンを2つつけますので、注意してください。

first-letterの他に、主な疑似要素としては「first-line（1行目を装飾）」「before（要素の直前に追加）」「after（要素の直後に追加）」があります。

本記事は初心者向けなので1つ1つを細かくは説明しないですが、まずは「first-letter」の書き方を習得すれば他の書き方も理解は容易にできるはずです。

CSSの疑似クラスとは

擬似クラスとは、指定した要素が特定の状態である場合にスタイルを適用させる方法です。

具体例として、「まだクリックされていないリンクを緑色に、1度クリックされたらそのリンクは青色に」してみましょう。

まだクリックされていないリンクを緑色に表示するやり方

<div>
<p><a href="#">まだクリックされていないリンクの色を緑色にします。</a></p>
</div>

a:link{ color:green;}

上記のように、CSSで「link」を指定することで、まだクリックされていない状態の場合の装飾の指定（今回では文字色を緑色にする）をすることができます。

1度クリックされたらそのリンクは青色にするやり方

それでは、上記のCSSに「1度クリックされたらそのリンクは青色にする」指定を追加していきましょう。

<div>
<p><a href="#">まだクリックされていないリンクの色を緑色にします。1度でもクリックされたら青色になります。</a></p>
</div>

a:link{ color:green;}
a:visited{ color:blue;}

CSSにvisitedを追加すると、1度でもクリックされたら（＝訪問されたら）文字色を青色に装飾する指定ができます。

この、「link」や「visited」を疑似クラスといいます。冒頭で説明したとおり、指定した要素が”特定の状態（今回で言うと、クリックされたかされていないか）”である場合にスタイルを適用しています。

主な疑似クラスは、他に「hover（要素にマウスがホバーした際の指定）」「active（要素がアクティブになった際の指定）」があります。

まとめ

いかがでしたでしょうか。疑似要素、疑似クラスの基本的な例を紹介しました。

コーディングに少しずつ慣れてくると、次のステップに進むためにクラスの習得は欠かせません。是非本記事をきっかけに、理解を深めてください。