1. ホーム
  2. CSS

【CSS】疑似クラスと疑似要素、:と::の違いを解説

Share

CSSを学んでいると、:hover や ::before など「:（コロン）」から始まる記述を目にすると思います。

これらは「疑似クラス」や「疑似要素」と呼ばれるもので、見た目の装飾やインタラクションの制御に欠かせない機能です。

この記事では、それぞれの違いや使い方、:と::の意味の違いについてわかりやすく解説します。

疑似クラスとは？

「疑似クラス（Pseudo-classes）」は、HTML要素に特定の状態が適用されたときにスタイルを設定するための機能です。

要素そのものには変化がない場合でも、「状態」に応じた装飾ができます。

代表的な疑似クラス

疑似クラス説明
:hoverマウスカーソルが要素に乗ったとき
:active要素がクリックされているとき
:focus入力フォームなどがフォーカスされているとき
:first-child親の中で最初の子要素
:last-child親の中で最後の子要素
:nth-child(n)親の中でn番目の要素
:first-of-type同じ親の中で、指定したタグの最初の要素にスタイルを適用
:last-of-type同じタグの中で、最後に出現する要素にスタイルを適用
:nth-of-type(n)同じタグ名の兄弟要素のうち、n番目の要素にスタイルを適用
:not()指定したセレクタに該当しない要素にスタイルを適用される
:checkedラジオボタンやチェックボックスがチェックされているときに適用される

:hoverの使用例

button:hover {
  background-color: blue;
  color: white;
}

このCSSでは、ボタンにマウスカーソルが乗っている時だけ、背景色が青・文字色が白になります。

:first-childの使用例

:first-child は、ある要素が親の中で最初の子要素である場合に適用されます。たとえば、リストの最初の項目だけに特別なスタイルを適用したい場合に便利です。

使用例：リストの最初の項目を太字にする

ul li:first-child {
  font-weight: bold;
}

<ul>
  <li>最初の項目</li>
  <li>2番目の項目</li>
  <li>3番目の項目</li>
</ul>

このコードでは、「最初の項目」だけが太字で表示されます。

:first-child は 親要素の中で最初の子要素である必要があるため、別の要素が先にあると適用されないことがあります。

例えば以下のように、li の前に div などがあると、li:first-child は該当しません。

疑似要素とは？

「疑似要素（Pseudo-elements）」は、実際にはHTMLに存在しない要素のようなものを作り出し、そこにスタイルを適用できます。

テキストの一部や装飾の前後に要素を挿入する際に使用します。

代表的な疑似要素

疑似要素説明
::before要素の内容の前に挿入される仮想要素
::after要素の内容の後に挿入される仮想要素
::first-letter要素の最初の1文字
::first-line要素の最初の1行
::markerリストアイテム（<li>）の先頭にあるマーカー（記号）部分にスタイルを適用

::beforeの使用例

p::before {
  content: "★";
  color: gold;
}

このコードで、p要素のテキストの前に「★」が表示されます。

::afterにすると、テキストの後に「★」が表示されます。

:と::の違い

  • : は疑似クラスに使用します。
  • :: は疑似要素に使用します。

なぜ2つの書き方があるのか？

もともと疑似クラスと疑似要素のどちらも : で表現していましたが、CSS3から区別のために疑似要素に :: が導入されました。

ただし、互換性のため :before や :after といった旧記法も今でも有効です。

正しい使い分け

用途書き方対象
疑似クラス:hover, :focus, :nth-child()状態に応じた要素
疑似要素::before, ::after, ::first-line内容の一部や仮想的な要素

実践例：ボタンに装飾をつける

.button:hover {
  background-color: #333;
  color: white;
}
.button:hover::before {
  content: "→";
  margin-right: 8px;
  color: gray;
}

HTML:

<button class="button">続きはこちら</button>

→ マウスを乗せると背景色が変わり、左に矢印が表示されます。

まとめ

  • :hover や :nth-child() は 疑似クラス：要素の「状態」にスタイルを当てる。
  • ::before や ::after は 疑似要素：仮想的な要素にスタイルを当てる。
  • : は疑似クラス、:: は疑似要素を表す（CSS3以降の標準）。
  • 互換性を考慮する場合は、::before と :before の両方を確認しておくと安心。

CSSにおける見た目やインタラクションを制御する上で、疑似クラスと疑似要素は非常に重要な概念です。

両者の違いを正しく理解して、柔軟にスタイルを適用できるようにしましょう。