HOME >
CSS >
CSSの疑似要素・疑似クラスの種類と使い方【初心者にもわかり...

CSSの疑似要素・疑似クラスの種類と使い方【初心者にもわかりやすく解説】

投稿日:2022年02月22日（最終更新日:2022年02月23日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

CSSの疑似要素・疑似クラスとは？

疑似要素・疑似クラスは、どちらも元となる（基準となる）要素に対して追加のスタイルを指定したり装飾を行うために使用するCSSのセレクタ―です。

最大の特徴は、HTMLのソースコードには追加の記述やマークアップの必要がなく、CSS側のみでスタイルを指定ことが可能という点です。

SEO対策の観点からみても装飾目的のためだけにHTMLの記述を増やすべきでは無いので、そのような状況では疑似要素や疑似クラスを使用しましょう。

疑似要素と疑似クラスの違いは次の通りです。

疑似要素

疑似要素はCSS側だけで要素を作り出せるセレクターです。

HTMLに記述せずに新しい要素としてスタイルを適用できるので、見出しのデザインやアイコンの表示などサイト内で何度も使うデザインを作るときに活躍します。

疑似クラス

疑似クラスは、ある特定の条件の状態の要素に対してスタイルを適用させたい時に使用するセレクターです。

疑似クラスを使用すれば、マウスがホバーされた時やリンクが訪問済になった時などに通常とは異なるスタイルを適用することができます。

他にも、「何番目の要素」という指定や「以外の要素」というような指定の方法ができるので、HTMLに余計なクラス名などの記述を増やすことなくスタイルを分けることが可能になります。

疑似要素・疑似クラスの基本の書き方

どちらも元となる（基準とする）タグやクラス名・ID名の後ろに「:」（ダブルコロン）を付け、疑似要素名や疑似クラス名を記述して使用します。

他のセレクター同様にプロパティと値を指定することでスタイルを適用させることが可能です。

ここからは疑似要素と疑似クラスそれぞれの種類と具体的な使い方について説明していきます。

疑似要素の種類と使い方

まずは疑似要素の種類と使い方について説明します。

疑似要素には「beforeとafter」、「first-letter」「first-line」「marker」があります。

beforeとafter

beforeとafterを使うと元となる要素の前後にCSSによって要素を作りだしスタイルを指定して装飾したり、画像などの表示に使うことができます。

beforeは要素の前、afterは要素の後ろに表示されます。

beforeとafterはcontentプロパティと一緒に使います。contentプロパティはテキストを表示させたり、画像パスを指定することで画像を表示させることもできます。

beforeとafterで作り出した要素は通常の要素と同様にスタイルを指定することが可能です。

HTML

<div id="sample_ba" class="sample">見出しサンプル</div>

CSS

#sample_ba:before{/*テキストを表示する*/
    content:"疑似要素です。";
    color:#d40000;
    text-decoration:underline;
}
#sample_ba:after{/*画像を表示する*/
    content:url(icon_star.png);
}

プレビュー

見出しサンプル

contentは空の状態でも使える

bedoreとafterはcontentプロパティを空の状態にして、背景色や背景画像を表示させることもできます。

しかしbeforeとafterを使う際には、contentプロパティの記述が必須になります。

もしcontentプロパティを使わずにbackgroundプロパティなどで要素を表示させる場合でも、下記のようにcontentを空にして記述しておく必要があります。

contentを空にした場合は幅と高さの記述が必要です。また、初期値ではインライン要素になっているためdisplayプロパティでブロック要素（もしくはインライン要素）に変更しないと表示されないことがあります。

HTML

<div id="sample_ba2" class="sample">見出しサンプル2</div>

CSS

#sample_ba2:before{
    content:"";/*空にして記述する*/
    width:30px;
    height:30px;
    background:#d40000;
    display:block;/*ブロック要素に変更*/
}

プレビュー

見出しサンプル2

positionで配置を調整

beforeとafterは通常の要素と同じようにpositionプロパティで自由に配置を変更できます。

relativeやabsoluteを使えばafterも要素の前に移動できます。

HTML

<div id="sample_ba3" class="sample">見出しサンプル3</div>

CSS

#sample_ba3{
    padding-left:50px;
    position:relative;
}
#sample_ba3:before{
    content:"";
    width:30px;
    height: 30px;
    border-radius: 50%;
    background:#d40000;
    position: absolute;
    top:15px;
    left:15px;
}
#sample_ba3:after{
    content:"";
    width:30px;
    height:30px;
    border-radius: 50%;
    background: #0000d4;
    position:absolute;/*配置を変更*/
    top:5px;
    left:5px;
}

プレビュー

見出しサンプル3

first-letter

疑似要素「first-letter」を使うと要素の一文字目だけにスタイルを適用させることができます。

次のように記述して、一文字目のスタイルを指定します。

HTML

<div id="sample_fl" class="sample">見出しサンプル</div>

CSS

.sample{
    font-size: 20px;
    font-weight:400;
}
#sample_fl:first-letter{
    font-size: 2rem;
    font-weight:bold;
    color:#d40000;
}

プレビュー

見出しサンプル

first-letterはブロック要素に使えません。spanタグなどインライン要素に使用したい場合は、あらかじめdisplayプロパティでブロック要素に変更しておく必要があります。

first-letterの詳しい説明はこちら

CSSで一文字目だけ指定する方法

テキストの一文字目だけスタイルを変える方法には、疑似要素の「:first-letter」を使用する方法とspanを使って一文字目を囲んで指定する方法があります...【もっと読む】

first-line

疑似要素「first-line」を使うと要素の一行目だけにスタイルを適用させることができます。

次のように記述して、一行目のスタイルを指定します。

HTML

<div id="sample_fline" class="sample">ダミーテキストダミーテキストダミーテキストダミーテキスト<br>ダミーテキストダミーテキスト</div>

CSS

#sample_fline::first-line{
    font-size: 2rem;
    font-weight: bold;
    color:#d40000;
}

プレビュー

ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキスト

brタグで改行位置を指定していても、ウインドウサイズや親要素の幅などで改行された場合は、その部分までが一行目となります。

first-lineもブロック要素に使えません。spanタグなどインライン要素に使用したい場合は、あらかじめdisplayプロパティでブロック要素に変更しておく必要があります。

marker

疑似要素「marker」はliタグを使ったリスト要素のlist-styleに対してのスタイルを適用させることができます。

liタグの後ろに「::」（ダブルコロンを2つ）付けて、markerを記述して使います。

HTML

<ul id="sample_list"<
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
</ul>

CSS

ul#sample_list{
    padding-left:30px;
    list-style:decimal;
}
ul#sample_list li{
    line-height:2.5;
    font-size:16px;
}
ul#sample_list li::marker{
    color: #d40000;
    font-size:1.5rem;
    font-weight: bold;
}

プレビュー

リスト項目1
リスト項目2
リスト項目3

疑似クラスの種類と使い方

続いて、疑似クラスの種類と使い方について説明します。

疑似クラスを要素が特定の状態になっている時や要素の順番でスタイルを変更することができます。

疑似クラスには、「hover」「link」「visited」「nth-child」「first-child」「last-child」「not」があります。

hover

疑似クラス「hover」は要素がマウスホバーされた（マウスのカーソルが重なった）状態の時のスタイルを指定することができます。

HTML

<div id="sample_h" class="sample">カーソルを重ねてください</div>

CSS

#sample_h:hover{
    color: #d40000;
}

プレビュー

カーソルを重ねてください

なお、マウスホバーされてからスタイルが変更されるまでの時間はtransitionプロパティで変更できます。

transitionについて詳しくはこちら

CSSのtransitionの使い方

CSSのtransitionは、要素が指定したスタイルの状態へとどのくらいの時間をかけて変化するかを指定することができるプロパティです。手軽にアニメーションが表現可能です...【もっと読む】

マウスホバーされた時に別の要素のスタイルを変更する

hoverを利用すれば、マウスホバーされた時に別の要素のスタイルを指定することも可能です。（A要素がマウスホバーされた時のB要素のスタイルを指定する）

HTML

<div class="sample_btn">ボタン</div>
<div id="sample_h2" class="sample">ボタンにカーソルを重ねてください</div>

CSS

.sample_btn{
    max-width: 200px;
    padding:5px;
    background: #d9d9d9;
    border:solid 3px #666;
    border-radius:5px;
}
.sample_btn:hover + #sample_h2{
    color:#d40000;
    font-weight: bold;
}

プレビュー

ボタン

ボタンにカーソルを重ねてください

linkとvisited

疑似クラス「link」はリンクが未訪問の状態、「visited」はリンクが訪問済になった状態の時のスタイルをそれぞれ指定することができます。

HTML

<a href="###">ハイパーリンク</a>
<a href="###">ハイパーリンク2</a>

CSS

a:link{
    color:#d40000;
}
a:visited{
    color: #0000d4;
}

プレビュー

nth-child()

疑似クラス「nth-child」を使えば要素を順番で限定してスタイルを適用させることができます。

下記のように親要素の中の何番目の○○（セレクター名）というような書き方で対象の要素を指定します。

HTML

<ul id="sample_list2" class="sample_list">
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
    <li>リスト項目4</li>
    <li>リスト項目5</li>
    <li>リスト項目6</li>
</ul>

CSS

/*nth-child*/
#sample_list2 li:nth-child(4){/*4番目のliだけ*/
    color:#d40000;
    font-weight:bold;
}

プレビュー

リスト項目1
リスト項目2
リスト項目3
リスト項目4
リスト項目5
リスト項目6

奇数番目・偶数番目を指定する

nth-childでは、「nth-child(odd)」で奇数番目、「nth-child(even)」で偶数番目という指定が可能です。

これを利用すれば、テーブル（表）などで交互に色分けしたいときなどにHTML側でクラス名をわざわざ一行づつ記述しないで済みます。

HTML

<table id="sample_tbl1" class="sample_tbl">
    <tr><td>テーブル項目1</td><td>ダミーテキストダミーテキストダミーテキスト</td></tr>
    <tr><td>テーブル項目2</td><td>ダミーテキストダミーテキストダミーテキスト</td></tr>
    <tr><td>テーブル項目3</td><td>ダミーテキストダミーテキストダミーテキスト</td></tr>
    <tr><td>テーブル項目4</td><td>ダミーテキストダミーテキストダミーテキスト</td></tr>
    <tr><td>テーブル項目5</td><td>ダミーテキストダミーテキストダミーテキスト</td></tr>
    <tr><td>テーブル項目6</td><td>ダミーテキストダミーテキストダミーテキスト</td></tr>
</table>

CSS

#sample_tbl1 tr:nth-child(odd) td{/*奇数番目のみ*/
    background: #666;
    color:#fff;
}
#sample_tbl1 tr:nth-child(even) td{/*偶数番目のみ*/
    background: #333;
    color: #fff;
}

プレビュー

テーブル項目1	ダミーテキストダミーテキストダミーテキスト
テーブル項目2	ダミーテキストダミーテキストダミーテキスト
テーブル項目3	ダミーテキストダミーテキストダミーテキスト
テーブル項目4	ダミーテキストダミーテキストダミーテキスト
テーブル項目5	ダミーテキストダミーテキストダミーテキスト
テーブル項目6	ダミーテキストダミーテキストダミーテキスト

first-childとlast-child

疑似クラス「first-child」は一番最初の要素、「last-child」は一番最後の要素を指定できます。

この疑似クラスでスタイルを指定しておけば、要素が追加されたとしても常に最初（もしくは最後）の要素だけに異なるスタイルを適用させることが可能です。

HTML

<ul id="sample_list3" class="sample_list">
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
    <li>リスト項目4</li>
    <li>リスト項目5</li>
    <li>リスト項目6</li>
</ul>

CSS

/*first-child*/
#sample_list3 li:first-child{/*最初のliだけ*/
    color: #d40000;
    font-weight: bold;
}
/*last-child*/
#sample_list3 li:last-child{/*最後のliだけ*/
    color: #0000d4;
    font-weight: bold;
}

プレビュー

リスト項目1
リスト項目2
リスト項目3
リスト項目4
リスト項目5
リスト項目6

A:not(B)

疑似クラス「not」を使うと「B以外のA」というように特定のクラスやIDを除外してスタイルを適用させることができます。

下記のようにBの部分にクラス名やID名を記述して使用します。

HTML

<div id="sample_1" class="sample_n">ダミーテキスト1</div>
<div id="sample_2" class="sample_n">ダミーテキスト2</div>
<div id="sample_3" class="sample_n">ダミーテキスト3</div>
<div id="sample_4" class="sample_n">ダミーテキスト4</div>
<div id="sample_5" class="sample_n">ダミーテキスト5</div>

CSS

.sample_n:not(#sample_3){/*#sample_3以外の.sample_nクラス*/
    color:#d40000;
    font-weight: bold;
}

プレビュー

ダミーテキスト1

ダミーテキスト2

ダミーテキスト3

ダミーテキスト4

ダミーテキスト5

疑似要素と疑似クラスを併用して指定する

疑似要素と疑似クラスは一緒に使うこともできます。

例えばAという要素がマウスホバーされた時だけ、Aの疑似要素のスタイルを変更するといったことが可能です。

下記の例では、ボタンにマウスホバーされた時だけ、beforeを使って画像を表示させています。

HTML

<div id="sample_btn2">ボタン</div>
<div id="sample_double">ボタンにカーソルを重ねてください</div>

CSS

#sample_btn2{
    width:100%;
    max-width: 200px;
    background: #333;
    border:solid 3px #666;
    border-radius: 5px;
    color:#fff;
    text-align: center;
    font-weight: bold;
    padding: 5px;
    margin: 10px;
}
#sample_double{
    padding:5px;
    text-decoration: underline;
}
#sample_btn2:hover + #sample_double:before{
    content:url(icon_star.png);
}

プレビュー

ボタン

ボタンにカーソルを重ねてください