シュウ

公開日: 2020.02.22 / 更新日: 2026.10.27
今回は【CSS】初心者向け擬似要素、擬似クラスについて解説していきます。

• CSSの擬似クラス・擬似要素を初めて学ぶ方
  :first-childや::beforeなど、名前は聞くけれど使い方がよく分からない方です。
• HTMLにクラスを追加せずにデザインしたい方
  リストの偶数行だけ色を変えるなど、HTMLを変更せずにCSSだけでスタイルを調整したい方です。
• 現場で使われるCSSの書き方を知りたい方
  実務でよく使用される擬似クラス・擬似要素を、サンプルコードで確認したい方です。

擬似クラス・擬似要素とは

擬似クラスは、要素の位置や状態に応じてスタイルを適用する仕組みです。擬似要素は、要素の一部分や、要素の前後にスタイルを適用・コンテンツを追加する仕組みです。どちらもHTMLにクラス名を追加せずにデザインできるため、現場で頻繁に使用されます。

擬似クラスは種類が多いため、今回は現場でよく使用されるものに絞って紹介します。

サンプルHTMLの準備

シンプルなリストを作成しましょう。今回はulとliを使い、項目を6つ用意して擬似クラスを適用します。

<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
    <li>項目4</li>
    <li>項目5</li>
    <li>項目6</li>
</ul>

擬似クラスの使い方

最初の要素にだけスタイルを適用する

:first-child擬似クラスは、最初の子要素にスタイルが適用されます。

ul li:first-child {
    background-color: #e2d0b6;
}

最後の要素にだけスタイルを適用する

:last-child擬似クラスは、最後の子要素にスタイルが適用されます。

ul li:last-child {
    background-color: #e2d0b6;
}

偶数番目の要素にスタイルを適用する

:nth-child(even)擬似クラスは、偶数番目の子要素にスタイルが適用されます。

ul li:nth-child(even) {
    background-color: #e2d0b6;
}

奇数番目の要素にスタイルを適用する

:nth-child(odd)擬似クラスは、奇数番目の子要素にスタイルが適用されます。

ul li:nth-child(odd) {
    background-color: #e2d0b6;
}

上からn番目の要素にスタイルを適用する

:nth-child(3)擬似クラスは、上から3番目の子要素にスタイルが適用されます。:nth-child(5)擬似クラスは、上から5番目の子要素にスタイルが適用されます。

/*上から3番目の子要素を茶色*/
ul li:nth-child(3) {
    background-color: #e2d0b6;
}

/*上から5番目の子要素を緑色*/
ul li:nth-child(5) {
    background-color: #b3d3ae;
}

下からn番目の要素にスタイルを適用する

:nth-last-child(2)擬似クラスは、下から2番目の子要素にスタイルが適用されます。:nth-last-child(4)擬似クラスは、下から4番目の子要素にスタイルが適用されます。

/*下から2番目の子要素を茶色*/
ul li:nth-last-child(2) {
    background-color: #e2d0b6;
}

/*下から4番目の子要素を緑色*/
ul li:nth-last-child(4) {
    background-color: #b3d3ae;
}

3の倍数の要素にスタイルを適用する

:nth-child(3n)擬似クラスは、3の倍数の子要素にスタイルが適用されます。

ul li:nth-child(3n) {
    background-color: #e2d0b6;
}

擬似要素の使い方

ここからは擬似要素です。擬似クラスと違い、コロンを2つ付けて記述します。::first-letterと::first-lineの確認には、文章のpタグを使用します。

<p>これはサンプルの文章です。擬似要素を使うと、文章の最初の文字や最初の行だけにスタイルを適用できます。画面幅によって、最初の行の長さは変わります。</p>

最初の文字にスタイルを適用する

::first-letter擬似要素は、最初の1文字にスタイルが適用されます。

p::first-letter {
    color: #b3d3ae;
    font-size: 30px;
}

最初の行にスタイルを適用する

::first-line擬似要素は、最初の1行にスタイルが適用されます。

p::first-line {
    color: #b3d3ae;
}

::beforeを適用する

::beforeを使用すると、要素の直前にコンテンツが挿入されます。

ul li::before {
    content: '●';
    color: #b3d3ae;
}

::afterを適用する

::afterを使用すると、要素の直後にコンテンツが挿入されます。

ul li::after {
    content: '▲';
    color: #b3d3ae;
}

まとめ

今回は、現場でよく使用する擬似クラス・擬似要素をまとめて紹介しました。
擬似クラス（:）は要素の位置や状態を条件に、擬似要素（::）は要素の一部分や前後に対してスタイルを適用します。
どちらも実務で確実に使用するので、サンプルを試しながら覚えておきましょう。

テンプレートを見る

Web・デザインの本棚を見る

< 前の記事

【HTML】table 表を作成からレイアウトの変更を解説