CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの疑似クラスと疑似要素の違いを徹底解説！コロンの数と使い分けのポイント

CSSには「疑似クラス」と「疑似要素」という、名前がよく似た2つの機能があります。どちらもセレクターを拡張する仕組みですが、役割や書き方が異なります。本記事では、両者の違いをサンプルコード付きでわかりやすく解説します。

疑似クラス（Pseudo-Class）とは

疑似クラスは、:hover、:active、:last-childのように、セレクターの「状態」や「条件」を表すものです。マウスオーバー時のスタイル変更など、要素が特定の状態にあるときの見た目を制御できます。

疑似クラスはコロン1つ（:）で始まります。

CSS疑似クラスの基本構文は以下のとおりです。

:pseudo-class {
  属性: 値;
}

疑似要素（Pseudo-Element）とは

一方、疑似要素は、::after、::before、::first-lineのように、HTML上には実際に存在しない「仮想的な要素」を選択してスタイルを適用するためのものです。要素の一部だけを装飾したり、装飾用のコンテンツを追加したりできます。

疑似要素はコロン2つ（::）で始まります。これは疑似クラスと区別するための表記ルールです。

CSS疑似要素の基本構文は以下のとおりです。

::pseudo-element {
  属性: 値;
}

サンプルコード1：疑似クラスの使用例

以下の例では、リンクにマウスカーソルを合わせたとき（:hover）にスタイルが変化する、疑似クラスの基本的な動作を確認できます。

<!DOCTYPE html>
<html>
<head>
<style>
a:hover {
  padding: 3%;
  font-size: 1.4em;
  color: tomato;
  background: bisque;
}
</style>
</head>
<body>
<p>You're somebody else</p>
<a href="#">ダミーリンク1</a>
<a href="#">ダミーリンク2</a>
</body>
</html>

このコードを実行すると、リンクにカーソルを重ねた瞬間に文字サイズが大きくなり、文字色と背景色が変化します。ボタンやナビゲーションメニューでよく使われる定番テクニックです。

サンプルコード2：疑似要素と疑似クラスの併用例

次の例では、疑似要素の::afterで各段落の後ろにテキストを追加し、疑似クラスの:last-childで最後の段落だけスタイルを変更しています。

<!DOCTYPE html>
<html>
<head>
<style>
p::after {
  content: " BOOM!";
  background: hotpink;
}
p:last-child {
  font-size: 1.4em;
  color: red;
}
</style>
</head>
<body>
<p>Anymore Snare?</p>
<p>Donec in semper diam. Morbi sollicitudin sed eros nec elementum. Praesent eget nisl vitae neque consectetur tincidunt.</p>
<p>Hit</p>
<p>Pop</p>
</body>
</html>

このコードを実行すると、すべての段落の後ろにピンク色の背景で「BOOM!」というテキストが挿入され、最後の段落（Pop）だけが赤色・大きめの文字で表示されます。このように疑似クラスと疑似要素は併用でき、組み合わせることで表現の幅が大きく広がります。

まとめ

  • 疑似クラス：要素の「状態」や「条件」を表す。コロン1つで記述（例：:hover、:active、:last-child）
  • 疑似要素：仮想的な「要素」を選択する。コロン2つで記述（例：::before、::after、::first-line）

まずは:hoverや::afterなど頻出のものから実際に試してみることで、CSSの表現力をぐっと高めることができます。

  1. CSSのborder（ボーダー）とoutline（アウトライン）の違いを徹底解説

    CSSで要素に枠線を表示したいとき、borderプロパティとoutlineプロパティという2つの選択肢があります。どちらも要素の周囲に線を描くためのプロパティですが、挙動や使い方には明確な違いがあります。本記事では、それぞれの特徴と違いをサンプルコード付きでわかりやすく解説します。borderプロパティとはborderは、要素の境界線を定義するためのプロパティです。border-width（太さ）、border-style（スタイル）、border-color（色）の一括指定ができるショートハンドとして機能します。主な特徴は以下の通りです。レイアウト上のスペース（領域）を占有します上下左右の各

  2. 【CSS入門】display:noneとvisibility:hiddenの違いを徹底解説！使い分けのポイント

    CSSでは、visibilityプロパティとdisplayプロパティを使って、HTMLドキュメント内の要素を非表示にすることができます。一見すると、どちらのプロパティを使っても見た目は同じように思えるかもしれませんが、実は両者には重要な違いがあります。 display: none と visibility: hidden の基本的な違い display: none — 要素そのものがドキュメント上にレンダリングされず、領域（スペース）も一切確保されません。要素が最初から存在しなかったかのような挙動になります。 visibility: hidden — 要素はドキュメント上にレンダリングされ、