【基本編】CSSの擬似クラスとは？基本的な擬似クラスの使い方を解説。

【 2025/05/16 08:21 更新】

擬似クラスとは

擬似クラスとは、要素の特定の状態を指定できるセレクタの書き方の一種です。

要素にカーソルがあってる時・クリックした時など特定の状態のとき用のスタイルを指定できます。

【擬似クラスの書き方】

図中 "要素のセレクタ"について

セレクタとは、CSSとHTMLを紐づける名前や条件のようなものです。
HTML上のどの要素を示すのかを定義します。

【セレクタの書き方】

CSSセレクタの種類 (【CSS】初心者向け基礎知識！セレクタ・結合子・プロパティの基本！) | こじはなNote

この記事は基本編だよ！上級編はこっちの記事を見てね！

【上級編】CSSの擬似クラスの使い方！（ページ内リンク/入力系要素用）| こじはなNote

:hover｜カーソルが要素の上にあるとき

:hoverは、パソコンのカーソル（ポインター）の位置が要素の上にあるときに適用するスタイルを定義できます。

aタグやボタン要素によく使われます。

スマホだとカーソルはありませんが、要素を押下した瞬間に:hoverのスタイルが反映される場合があります。

aタグ

aタグとはリンクが作れるHTMLタグです。

【 aタグの書き方】

<a href="URLやパス">リンクの表示タイトル</a>

パスとはファイルやディレクトリ（フォルダー）がある場所のことです。
【パスの基本に関する記事】
パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！ | こじはなNote

【 test.css 】


.button {
    display: block;
    width: 100px;
    height: 100px;
    color: white;
    background-color: blue;
    box-shadow: 0 1px 7px 0 #000000;
}

.button:hover {
    color: blue;
    background-color: white;
    box-shadow: none;
}

【 HTMLファイル】


<a class="button">
    aタグのボタン
</a>
<br>
<button class="button">
    buttonタグのボタン
</button>

ブラウザで実行するとこんな感じです。

実際にカーソルを上に動かしてみてください！

カーソルを要素の上に動かすと、"hover:"で指定したスタイルが反映されます。

buttonタグ

buttonタグはボタン要素を定義できます。
buttonタグの開始タグ・終了タグの間にボタン上に表示させたい文字を設定できます。
また、属性typeに"button"や"submit"を設定でき、押下時フォームを送信するかを指定できます。

【属性typeの値について】

submit：押下されたら送信。(デフォルト)
button：押下されても送信しない。

【 HTMLファイル】

        
        <button class="submit">
            button type="submit"
        </button>
        <br>
        <button type="button">
            button type="button"
        </button>

例で使用したその他プロパティ解説

例で使用したプロパティについては以下の通りです。

display	displayプロパティには要素の種類や表示を指定できます。プロパティの記載は「display: (要素の種類)」のように指定します。 (要素の種類)についてはblock/inline/inline-block/flexなど様々用意されています。【displayについて】プロパティ：display \| こじはなNote
height/width	widthは要素の幅、heightは要素の高さを指定できるプロパティです。
color	文字の色を指定できるプロパティです。プロパティの記載は「color: (色)」のように指定します。
background-color	背景の色を指定できるプロパティです。プロパティの記載は「background-color: (色)」のように指定します。【background-colorについて】プロパティ：background-color \| こじはなNote
box-shadow	要素に影をつけることができるプロパティです。プロパティの記載は以下のように指定します。【 box-shadowの値】 box-shadow: (ずらすX値) (ずらすY値) (ぼかし値) (拡大値) (色) (内側"inset"); 【box-shadowについての記事】 CSSのbox-shadowとは？box-shadowを使った影の付け方を解説！ \| こじはなNote

:active｜要素を押下している間

:activeは要素を押下している間に適用するスタイルを定義できます。

aタグやボタン要素によく使われます。

スマホやタブレットでは、押しても反応しない場合があります。

aタグ

aタグとはリンクが作れるHTMLタグです。

【 aタグの書き方】

<a href="URLやパス">リンクの表示タイトル</a>

【 test.css 】


.button {
    display: block;
    width: 100px;
    height: 100px;
    color: white;
    background-color: blue;
    box-shadow: 0 1px 7px 0 #000000;
}

.button:active {
    color: blue;
    background-color: white;
    box-shadow: none;
}

【 HTMLファイル】


<a class="button">
    aタグのボタン
</a>
<br>
<button class="button">
    buttonタグのボタン
</button>

ブラウザで実行するとこんな感じです。

実際にボタンを押してみてください！

※スマホやタブレットでは、押しても反応しない場合があります。

ボタンを押下すると、"active:"で指定したスタイルが反映されます。

buttonタグ

【属性typeの値について】

submit：押下されたら送信。(デフォルト)
button：押下されても送信しない。

【 HTMLファイル】

        
        <button class="submit">
            button type="submit"
        </button>
        <br>
        <button type="button">
            button type="button"
        </button>

例で使用したその他プロパティ解説

例で使用したプロパティについては以下の通りです。

display	displayプロパティには要素の種類や表示を指定できます。プロパティの記載は「display: (要素の種類)」のように指定します。 (要素の種類)についてはblock/inline/inline-block/flexなど様々用意されています。【displayについて】プロパティ：display \| こじはなNote
height/width	widthは要素の幅、heightは要素の高さを指定できるプロパティです。
color	文字の色を指定できるプロパティです。プロパティの記載は「color: (色)」のように指定します。
background-color	背景の色を指定できるプロパティです。プロパティの記載は「background-color: (色)」のように指定します。【background-colorについて】プロパティ：background-color \| こじはなNote
box-shadow	要素に影をつけることができるプロパティです。プロパティの記載は以下のように指定します。【 box-shadowの値】 box-shadow: (ずらすX値) (ずらすY値) (ぼかし値) (拡大値) (色) (内側"inset"); 【box-shadowについての記事】 CSSのbox-shadowとは？box-shadowを使った影の付け方を解説！ \| こじはなNote

:link｜アクセスしていないリンク

:linkはアクセスしていないリンクに適用するスタイルを定義できます。

aタグによく使われます。

aタグ

aタグとはリンクが作れるHTMLタグです。
また、target属性にはページの開き方を設定でき、"_blank"を指定すると別タブで開きます。

【 aタグの書き方】

<a href="URLやパス" target="ページの開き方の設定">リンクの表示タイトル</a>

【 test.css 】


a:link {
    color: green;
}

【 HTMLファイル】


<a href="https://cojihana-note.com/about/introduction" target="_blank">
    こじはなNoteのサイトについて
</a>

ブラウザで実行するとこんな感じです。

実際にリンクを押してアクセスしてみてください！

リンク押下前は"link:"で指定したスタイルが反映されますが、アクセス後は別の色になります。

※初めから"link:"で指定したスタイルになっていな場合、過去に訪問済みである可能性があります。

aタグ

aタグとはリンクが作れるHTMLタグです。
また、target属性にはページの開き方を設定でき、"_blank"を指定すると別タブで開きます。

【 aタグの書き方】

<a href="URLやパス" target="ページの開き方の設定">リンクの表示タイトル</a>

colorプロパティ

colorプロパティは文字の色を指定できるプロパティです。
プロパティの記載は「color: (色)」のように指定します。

:visited｜アクセス済みのリンク

:visitedはアクセス済みのリンクに適用するスタイルを定義できます。

aタグによく使われます。

aタグ

aタグとはリンクが作れるHTMLタグです。
また、target属性にはページの開き方を設定でき、"_blank"を指定すると別タブで開きます。

【 aタグの書き方】

<a href="URLやパス" target="ページの開き方の設定">リンクの表示タイトル</a>

【 test.css 】


a:visited {
    color: green;
}

【 HTMLファイル】


<a href="https://cojihana-note.com/tag/other" target="_blank">
    タグ：その他｜こじはなNote
</a>

ブラウザで実行するとこんな感じです。

実際にリンクを押してアクセスしてみてください！

リンクへアクセス後は"visited:"で指定したスタイルが反映されます。

※初めから"visited:"で指定したスタイルになる場合、過去に訪問済みのサイトである可能性があります。

aタグ

aタグとはリンクが作れるHTMLタグです。
また、target属性にはページの開き方を設定でき、"_blank"を指定すると別タブで開きます。

【 aタグの書き方】

<a href="URLやパス" target="ページの開き方の設定">リンクの表示タイトル</a>

colorプロパティ

colorプロパティは文字の色を指定できるプロパティです。
プロパティの記載は「color: (色)」のように指定します。

:is(セレクタ)｜()のセレクタに該当するとき

:is(セレクタ)は()に指定しているセレクタに該当する場合に適用するスタイルを定義できます。

A:is(B)だとすると、AがBに該当する場合という意味になります。

セレクタとは

セレクタとは、CSSとHTMLを紐づける名前や条件のようなものです。
HTML上のどの要素を示すのかを定義します。

【セレクタの書き方】

CSSセレクタの種類 (【CSS】初心者向け基礎知識！セレクタ・結合子・プロパティの基本！) | こじはなNote

【 test.css 】


.block:is(.color-green) {
    color: green;
}

【 HTMLファイル】


<div class="block">blockだけ</div>
<br>
<div class="block color-green">blockかつcolor-green</div>

ブラウザで実行するとこんな感じです。

クラス属性に"block"と"color-green"どちらも指定している2つ目の要素に、スタイルが反映されました。

colorプロパティ

colorプロパティは文字の色を指定できるプロパティです。
プロパティの記載は「color: (色)」のように指定します。

:not(セレクタ)｜()のセレクタに該当しないとき

:not(セレクタ)は()に指定しているセレクタに該当しない場合に適用するスタイルを定義できます。

A:not(B)だとすると、AがBに該当しない場合という意味になります。

セレクタとは

セレクタとは、CSSとHTMLを紐づける名前や条件のようなものです。
HTML上のどの要素を示すのかを定義します。

【セレクタの書き方】

CSSセレクタの種類 (【CSS】初心者向け基礎知識！セレクタ・結合子・プロパティの基本！) | こじはなNote

【 test.css 】


.block:not(.color-green) {
    color: green;
}

【 HTMLファイル】


<div class="block">blockだけ</div>
<br>
<div class="block color-green">blockかつcolor-green</div>

ブラウザで実行するとこんな感じです。

クラス属性に"block"と"color-green"の両方を指定していない要素にスタイルが反映されました。

colorプロパティ

colorプロパティは文字の色を指定できるプロパティです。
プロパティの記載は「color: (色)」のように指定します。

:has(セレクタ)｜()のセレクタに該当する子要素があるとき

:has(セレクタ)は()に指定しているセレクタに該当する子要素がある場合に適用するスタイルを定義できます。

A:has(B)だとすると、親要素Aの中に子要素Bがある場合という意味になります。

セレクタとは

セレクタとは、CSSとHTMLを紐づける名前や条件のようなものです。
HTML上のどの要素を示すのかを定義します。

【セレクタの書き方】

CSSセレクタの種類 (【CSS】初心者向け基礎知識！セレクタ・結合子・プロパティの基本！) | こじはなNote

親/兄弟/子要素とは

親要素　：内包している要素。
子要素　：内包されている要素。
兄弟要素：同じ階層にある要素。

【セレクタで親/子/兄弟を指定する方法】

注意

特定のブラウザやバージョンによっては対応していない場合があります。

【 test.css 】


.parent:has(.color-green) {
    color: green;
}

【 HTMLファイル】


<div class="parent">
    ああああああああ
    <div class="color-green">color-greenクラス</div>
</div>
<br>
<div class="parent">
    ああああああああ
</div>

ブラウザで実行するとこんな感じです。

１つ目のクラス"parent"の要素にスタイルが反映されました。
クラス"parent"の要素内にクラス"color-green"があるためです。

colorプロパティ

colorプロパティは文字の色を指定できるプロパティです。
プロパティの記載は「color: (色)」のように指定します。

:first-child｜兄弟要素の中で一番最初の要素

親要素内にある兄弟要素の中で、一番最初にある要素に適用するスタイルを定義できます。

兄弟要素に指定

:first-childは兄弟要素となる要素に指定します。
親要素には指定しません。

親/兄弟/子要素とは

親要素　：内包している要素。
子要素　：内包されている要素。
兄弟要素：同じ階層にある要素。

【セレクタで親/子/兄弟を指定する方法】

【 test.css 】


li:first-child {
    color: green;
}

【 HTMLファイル】


<ul>
    <li>最初のli要素</li>
    <li>li要素</li>
    <li>li要素</li>
</ul>

ブラウザで実行するとこんな感じです。

一番最初のli要素の文字色だけが変わりました。

ul・liタグとは

ulタグ：順序のあるリストを意味し、liタグを内包します。
liタグ：リストの項目に使うタグです。

colorプロパティ

colorプロパティは文字の色を指定できるプロパティです。
プロパティの記載は「color: (色)」のように指定します。

:last-child｜兄弟要素の中で一番最後の要素

親要素内にある兄弟要素の中で、一番最後にある要素に適用するスタイルを定義できます。

兄弟要素に指定

:last-childは兄弟要素となる要素に指定します。
親要素には指定しません。

親/兄弟/子要素とは

親要素　：内包している要素。
子要素　：内包されている要素。
兄弟要素：同じ階層にある要素。

【セレクタで親/子/兄弟を指定する方法】

【 test.css 】


li:last-child {
    color: green;
}

【 HTMLファイル】


<ul>
    <li>li要素</li>
    <li>li要素</li>
    <li>最後のli要素</li>
</ul>

ブラウザで実行するとこんな感じです。

一番最後のli要素の文字色だけが変わりました。

ul・liタグとは

ulタグ：順序のあるリストを意味し、liタグを内包します。
liタグ：リストの項目に使うタグです。

colorプロパティ

colorプロパティは文字の色を指定できるプロパティです。
プロパティの記載は「color: (色)」のように指定します。

:nth-child(値)｜指定した値に合致する要素（基準：すべて）

親要素内にある兄弟要素の中で、()に指定した値に合致する要素に適用するスタイルを定義できます。

A:nth-child(B)だとすると、兄弟要素Aの中で値Bに合致する場合という意味になります。

【後述する"nth-of-type()"との違い】

親要素内のすべての子要素を基にした順番。

兄弟要素に指定

:nth-childは兄弟要素となる要素に指定します。
親要素には指定しません。

親/兄弟/子要素とは

親要素　：内包している要素。
子要素　：内包されている要素。
兄弟要素：同じ階層にある要素。

【セレクタで親/子/兄弟を指定する方法】

:nth-child(odd)

奇数番目の要素の場合に適用されます。

【 test.css 】

    
    li:nth-child(odd) {
        color: green;
    }

【 HTMLファイル】

    
    <ul>
        <li>li要素：1つ目</li>
        <li>li要素：2つ目</li>
        <li>li要素：3つ目</li>
        <li>li要素：4つ目</li>
    </ul>

ブラウザで実行するとこんな感じです。

奇数番目のli要素の文字色だけが変わりました。

ul・liタグとは

ulタグ：順序のあるリストを意味し、liタグを内包します。
liタグ：リストの項目に使うタグです。

colorプロパティ

colorプロパティは文字の色を指定できるプロパティです。
プロパティの記載は「color: (色)」のように指定します。

:nth-child(even)

偶数番目の要素の場合に適用されます。

【 test.css 】

    
    li:nth-child(even) {
        color: green;
    }

【 HTMLファイル】

    
    <ul>
        <li>li要素：1つ目</li>
        <li>li要素：2つ目</li>
        <li>li要素：3つ目</li>
        <li>li要素：4つ目</li>
    </ul>

ブラウザで実行するとこんな感じです。

偶数番目のli要素の文字色だけが変わりました。

ul・liタグとは

ulタグ：順序のあるリストを意味し、liタグを内包します。
liタグ：リストの項目に使うタグです。

colorプロパティ

colorプロパティは文字の色を指定できるプロパティです。
プロパティの記載は「color: (色)」のように指定します。

:nth-child(自然数)

[()に指定した自然数]番目にあたる要素に適用されます。

【 test.css 】

    
    li:nth-child(2) {
        color: green;
    }

【 HTMLファイル】

    
    <ul>
        <li>li要素：1つ目</li>
        <li>li要素：2つ目</li>
        <li>li要素：3つ目</li>
        <li>li要素：4つ目</li>
        <li>li要素：5つ目</li>
    </ul>

ブラウザで実行するとこんな感じです。

nth-child()の()に指定した"2"番目のli要素の文字色だけが変わりました。

ul・liタグとは

ulタグ：順序のあるリストを意味し、liタグを内包します。
liタグ：リストの項目に使うタグです。

colorプロパティ

colorプロパティは文字の色を指定できるプロパティです。
プロパティの記載は「color: (色)」のように指定します。

:nth-child(An＋B)

()の式で求められる番号に合致する要素に適用されます。

【 An＋Bの意味】

A：刻み値。任意の値を指定する。
n：0,1,2,3...と連続した数。"n"と指定する。
B：加算値。任意の値を指定する。

"n"は連続した数なので、nが0のとき・1のとき・2のとき...と、複数の答えが出ます。

この"複数の答え"に含まれる〇番目の要素全てに適用されます。

【 test.css 】

    
    li:nth-child(3n+2) {
        color: green;
    }

【 HTMLファイル】

    
    <ul>
        <li>li要素：1つ目</li>
        <li>li要素：2つ目</li>
        <li>li要素：3つ目</li>
        <li>li要素：4つ目</li>
        <li>li要素：5つ目</li>
    </ul>

ブラウザで実行するとこんな感じです。

nth-child()の()に指定した式の答えに合致したli要素の文字色が変わりました。

【例の式(3n+2)の計算】

n	式	答え
0	3 × 0 + 2	2
1	3 × 1 + 2	5
2	3 × 2 + 2	8
・・・	・・・	・・・

複数の答えのうち"2"・"5"番目の要素が存在するので、
"2"・"5"番目の要素に適用されます。

ul・liタグとは

ulタグ：順序のあるリストを意味し、liタグを内包します。
liタグ：リストの項目に使うタグです。

colorプロパティ

colorプロパティは文字の色を指定できるプロパティです。
プロパティの記載は「color: (色)」のように指定します。

:nth-of-type(値)｜指定した値に合致する要素（基準：指定したタグ）

親要素内にある兄弟要素の中で、()に指定した値に合致する要素に適用するスタイルを定義できます。

A:nth-of-type(B)だとすると、兄弟要素Aの中で値Bに合致する場合という意味になります。

【前述した"nth-child()"との違い】

親要素内の指定したタグ全てを基にした順番。

兄弟要素に指定

:nth-of-typeは兄弟要素となる要素に指定します。
親要素には指定しません。

親/兄弟/子要素とは

親要素　：内包している要素。
子要素　：内包されている要素。
兄弟要素：同じ階層にある要素。

【セレクタで親/子/兄弟を指定する方法】

:nth-of-type(odd)

奇数番目の要素の場合に適用されます。

【 test.css 】

    
    li:nth-of-type(odd) {
        color: green;
    }

【 HTMLファイル】

    
    <ul>
        <li>li要素：1つ目</li>
        <li>li要素：2つ目</li>
        <li>li要素：3つ目</li>
        <li>li要素：4つ目</li>
    </ul>

ブラウザで実行するとこんな感じです。

奇数番目のli要素の文字色だけが変わりました。

ul・liタグとは

ulタグ：順序のあるリストを意味し、liタグを内包します。
liタグ：リストの項目に使うタグです。

colorプロパティ

colorプロパティは文字の色を指定できるプロパティです。
プロパティの記載は「color: (色)」のように指定します。

:nth-of-type(even)

偶数番目の要素の場合に適用されます。

【 test.css 】

    
    li:nth-of-type(even) {
        color: green;
    }

【 HTMLファイル】

    
    <ul>
        <li>li要素：1つ目</li>
        <li>li要素：2つ目</li>
        <li>li要素：3つ目</li>
        <li>li要素：4つ目</li>
    </ul>

ブラウザで実行するとこんな感じです。

偶数番目のli要素の文字色だけが変わりました。

ul・liタグとは

ulタグ：順序のあるリストを意味し、liタグを内包します。
liタグ：リストの項目に使うタグです。

colorプロパティ

colorプロパティは文字の色を指定できるプロパティです。
プロパティの記載は「color: (色)」のように指定します。

:nth-of-type(自然数)

[()に指定した自然数]番目にあたる要素に適用されます。

【 test.css 】

    
    li:nth-of-type(2) {
        color: green;
    }

【 HTMLファイル】

    
    <ul>
        <li>li要素：1つ目</li>
        <li>li要素：2つ目</li>
        <li>li要素：3つ目</li>
        <li>li要素：4つ目</li>
        <li>li要素：5つ目</li>
    </ul>

ブラウザで実行するとこんな感じです。

nth-of-type()の()に指定した"2"番目のli要素の文字色だけが変わりました。

ul・liタグとは

ulタグ：順序のあるリストを意味し、liタグを内包します。
liタグ：リストの項目に使うタグです。

colorプロパティ

colorプロパティは文字の色を指定できるプロパティです。
プロパティの記載は「color: (色)」のように指定します。

:nth-of-type(An＋B)

()の式で求められる番号に合致する要素に適用されます。

【 An＋Bの意味】

A：刻み値。任意の値を指定する。
n：0,1,2,3...と連続した数。"n"と指定する。
B：加算値。任意の値を指定する。

"n"は連続した数なので、nが0のとき・1のとき・2のとき...と、複数の答えが出ます。

この"複数の答え"に含まれる〇番目の要素全てに適用されます。

【 test.css 】

    
    li:nth-of-type(3n+2) {
        color: green;
    }

【 HTMLファイル】

    
    <ul>
        <li>li要素：1つ目</li>
        <li>li要素：2つ目</li>
        <li>li要素：3つ目</li>
        <li>li要素：4つ目</li>
        <li>li要素：5つ目</li>
    </ul>

ブラウザで実行するとこんな感じです。

nth-of-type()の()に指定した式の答えに合致したli要素の文字色が変わりました。

【例の式(3n+2)の計算】

n	式	答え
0	3 × 0 + 2	2
1	3 × 1 + 2	5
2	3 × 2 + 2	8
・・・	・・・	・・・

複数の答えのうち"2"・"5"番目の要素が存在するので、
"2"・"5"番目の要素に適用されます。

ul・liタグとは

ulタグ：順序のあるリストを意味し、liタグを内包します。
liタグ：リストの項目に使うタグです。

colorプロパティ

colorプロパティは文字の色を指定できるプロパティです。
プロパティの記載は「color: (色)」のように指定します。

まとめ

擬似クラスとは、要素の特定の状態を指定できるセレクタの書き方の一種で、特定の状態のとき用のスタイルを指定できる。
:hover：パソコンのカーソル（ポインター）の位置が要素の上にあるときに適用するスタイルを定義できる。
:active：要素を押下したときに適用するスタイルを定義できる。
:link：アクセスしていないリンクに適用するスタイルを定義できる。
:visited：アクセス済みのリンクに適用するスタイルを定義できる。
:is(セレクタ)：()に指定しているセレクタに該当する場合に適用するスタイルを定義できる。
:not(セレクタ)：()に指定しているセレクタに該当しない場合に適用するスタイルを定義できる。
:has(セレクタ)：()に指定しているセレクタに該当する子要素がある場合に適用するスタイルを定義できる。
:first-child：親要素内にある兄弟要素の中で、一番最初にある要素に適用するスタイルを定義でき、兄弟要素となる要素に指定する。
:last-child：親要素内にある兄弟要素の中で、一番最後にある要素に適用するスタイルを定義でき、兄弟要素となる要素に指定する。
:nth-child(値)：親要素内にある兄弟要素の中で、()に指定した値に合致する要素に適用するスタイルを定義でき、親要素内のすべての子要素を基にした順番となる。
また、兄弟要素となる要素に指定する。
:nth-of-type(値)：親要素内にある兄弟要素の中で、()に指定した値に合致する要素に適用するスタイルを定義でき、親要素内の指定したタグ全てを基にした順番となる。
また、兄弟要素となる要素に指定する。
:nth-child・:nth-of-typeの値は、奇数を指すodd、偶数を指すeven、n番目を指す自然数、式An+B（A・Bは任意の値）を指定できる。

【 2025/05/16 08:21 更新】

こじはな

Webエンジニア3年目。

フロントからバックエンドまで幅広く経験や知識を発信します！