CSS疑似クラスとは？基本構文から全31種類の一覧と実例まで徹底解説
CSSの疑似クラス（Pseudo Class）を使うと、HTMLの既存要素に対して、特定の状態に応じたスタイルを適用できます。たとえば「:hover（マウスオーバー時）」「:visited（訪問済みリンク）」「:disabled（無効化された要素）」などが代表的な例です。これにより、JavaScriptを使わずに動的な表現を実現できます。
注意： CSS3では、疑似クラスと疑似要素を区別するため、疑似クラスは単一コロン（:）の記法を使用します。
構文
CSS疑似クラスを使用する際の基本的な構文は以下の通りです。
Selector:pseudo-class {
css-property: /*値*/;
}主なCSS疑似クラス一覧
利用できるCSS疑似クラスは以下の通りです。
| No. | 疑似クラスと説明 |
|---|---|
| 1 | :active クリック中など、アクティブな状態の要素を選択します |
| 2 | :checked チェックされている要素（チェックボックスやラジオボタンなど）を選択します |
| 3 | :disabled 無効化されているすべての要素を選択します |
| 4 | :empty 子要素を一切持たない要素を選択します |
| 5 | :enabled 有効化されているすべての要素を選択します |
| 6 | :first-child 親要素の最初の子である要素を選択します |
| 7 | :first-of-type 親要素内で最初に出現する、その種類の要素を選択します |
| 8 | :focus フォーカスが当たっている要素を選択します |
| 9 | :hover マウスカーソルが重なった状態の要素を選択します |
| 10 | :in-range 指定された範囲内の値を持つ要素を選択します |
| 11 | :invalid 無効な値を持つすべての要素を選択します |
| 12 | :lang(言語) lang属性の値が指定した言語で始まるすべての要素を選択します |
| 13 | :last-child 親要素の最後の子である要素を選択します |
| 14 | :last-of-type 親要素内で最後に出現する、その種類の要素を選択します |
| 15 | :link 未訪問のリンク要素をすべて選択します |
| 16 | :not(selector) 指定したセレクターに該当しないすべての要素を選択します |
| 17 | :nth-child(n) 親要素のn番目の子である要素を選択します |
| 18 | :nth-last-child(n) 最後の子から数えてn番目の子である要素を選択します |
| 19 | :nth-last-of-type(n) 最後の子から数えてn番目に出現する、その種類の要素を選択します |
| 20 | :nth-of-type(n) 親要素内でn番目に出現する、その種類の要素を選択します |
| 21 | :only-of-type 親要素内で唯一存在する、その種類の要素を選択します |
| 22 | :only-child 親要素の唯一の子である要素を選択します |
| 23 | :optional required属性を持たない要素を選択します |
| 24 | :out-of-range 指定された範囲外の値を持つ要素を選択します |
| 25 | :read-only readonly属性が指定された要素を選択します |
| 26 | :read-write readonly属性を持たない（編集可能な）要素を選択します |
| 27 | :required required属性が指定された要素を選択します |
| 28 | :root ドキュメントのルート要素（html要素など）を選択します |
| 29 | :target 現在アクティブな要素（アンカー名を含むURLでクリックされた対象）を選択します |
| 30 | :valid 有効な値を持つすべての要素を選択します |
| 31 | :visited 訪問済みのリンク要素をすべて選択します |
サンプルコード①：アンカーへの疑似クラス適用
まずは、リンク要素に対して複数の疑似クラスを組み合わせて使う例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
color: #000;
padding:20px;
background-image: linear-gradient(135deg, grey 0%, white 100%);
text-align: center;
}
.anchor {
color: #FF8A00;
}
.anchor:last-child {
color: #03A9F4;
}
.anchor:visited {
color: #FEDC11;
}
.anchor:hover {
color: #C303C3;
}
.anchor:active {
color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html>出力結果
このコードを実行すると、次のような表示になります。
この例では、:visitedで訪問済みリンクの色を変え、:hoverでマウスオーバー時の色を変え、:activeでクリック中の色を変えることで、リンクの状態に応じた視覚的なフィードバックを実現しています。
サンプルコード②：nth-of-typeとhoverの活用
続いて、:nth-of-type()を使って兄弟要素ごとに異なる背景色を設定し、:hoverでホバー時に色を変える例です。
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
box-sizing: border-box;
}
.child{
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
.child:hover{
background-color: #000;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Pseudo-Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>出力結果
このコードを実行すると、次のような表示になります。
div要素にホバーしていない場合：
div要素にホバーしている場合：
このように、:nth-of-type()を使えば各要素に個別のclass名を付けることなく順番に応じたスタイルを適用でき、:hoverと組み合わせることでインタラクティブな演出も簡単に実装できます。
-
CSSのtext-transformプロパティでテキストの大文字・小文字を変換する方法
CSSのtext-transformプロパティを使うと、要素内のテキストの大文字・小文字の表示形式を簡単に制御できます。指定できる値は、capitalize、lowercase、uppercase、full-width、full-size-kana、noneの6種類です。 構文 CSSのtext-transformプロパティの構文は以下のとおりです。 Selector { text-transform: /*value*/ } 指定できる値の一覧 capitalize … 各単語の先頭文字を大文字にします uppercase … すべての文字を大文字にします lo
-
CSSでテーブルをスタイリングする方法｜主要プロパティと実例コード
CSSによるテーブルのスタイリングとは HTMLのテーブルは、CSSを使うことで罫線・余白・背景などを自由にデザインできます。<table>要素とその子要素をスタイリングする際には、主に以下のプロパティが使用されます。 border罫線の太さ（border-width）、スタイル（border-style）、色（border-color）をまとめて定義できるプロパティです。 border-collapse隣り合うセルの罫線を1本に共有するか（collapse）、セルごとに独立させるか（separate）を指定します。 caption-side<caption>で付け