【初心者OK】CSS疑似クラスの種類と書き方超簡単に解説

これからCSSを勉強してみたいと考えている方向けに、超簡単に噛み砕いて解説しています。どんな感じなのかなぁ～、くらいの興味でオッケーです。

今回はCSSの疑似クラスについて書いています。基本セレクターに加え、疑似クラスを上手く使えると、効率的に書けるだけでなく、さらに表現の幅も広がります。

小難しい事はあえて書いてません。

基本セレクターを先に知っておくと理解が早くなりますよ。

関連記事【初心者OK】CSS基本セレククターの種類と書き方を基礎から解説

2022.08.15

「もう知ってるよー」って所は読み飛ばしても大丈夫です。

CSSとはCascading Style Sheets（カスケーディング・スタイル・シート）の事。webサイトのレイアウト文字の色など、見た目を調整する役割として使います。
一方、HTMLは文章構造を構築する役割を担っています。例えるなら「本」と同じです。

この記事の目次

1 CSSセレクターとは（CSSの基礎・HTMLの予備知識）
- 1.1 予備知識：HTMLの構造
2 CSSの基本文法
3 CSS疑似クラスとは？
4 リンクに関する疑似クラス
5 「何番目か」絞り込んだ要素に適用する疑似クラス
6 まとめ：疑似クラス編

CSSセレクターとは（CSSの基礎・HTMLの予備知識）

CSSは、HTMLで作られた構造に対して文字の色やレイアウトの指定など、見た目の調整を行うもの。その調整をどこにするのかを指定する時に使うのが「CSSセレクター」です。

HTMLとCSSはそれぞれ役割が違うんだね

この記事では「CSS疑似クラス」というものを説明していきます。

「もう知ってるよー」って方は、「CSS疑似クラスとは？」の項目へどうぞ

予備知識：HTMLの構造

CSSを理解する前にまずHTMLがどのような仕組みか知っていると理解が深まります。

HTMLはタグと呼ばれる記号で構成されています。
開始タグと終了タグがあり、文章などの情報をこのタグで囲むことにより意味を持ちます。そして、この開始タグから終了タグで囲われた所を「要素」といいます。

タグによって使えるものに違いはありますが、「属性」とその値である、「属性値」を指定出来ます。
後で紹介する「id」や「class」も、「属性」と「属性値」になります。

さらに、要素をタグで囲むことも出来ます。「入れ子」と言ったりもします。
下の図だと、三つの要素は階層構造になっています。
外側の要素を「親要素」、内側の要素を「子要素」といい、子要素のさらに内側が「孫要素」です。

図解：HTMLの要素入れ子構造 — サンプルでは<div>が親要素。更に上にさかのぼって行けば<html>が親要素になります。

CSSの基本文法

CSSは、「セレクター」「プロパティ」「値」の3つで構成されています。
セレクターで指定する事により、デザインの適用先を選択しています。

CSSを適用する事を、「CSSを掛ける」と言ったりするよ。

CSS疑似クラスとは？

擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。
文章構造にある情報によってスタイルを変化させることができます。

CSSにおける疑似クラスはセレクタに付加するキーワードのことで、選択される要素の特定の状態のスタイルを指定するものです。

CSS疑似要素とのちがい

疑似要素は、要素の特定の部分にスタイルを適用するために使用します。

リンクに関する疑似クラス

実は普段何気なく押しているリンクも疑似クラスです。リンクは何も装飾をしていない場合、青色のテキストと下線がひかれた状態で表示されます。
でも多くの場合、サイトのイメージに合わない為、何かしらの装飾を加えている場合が多いです。

リンクには記述する順番がある

リンクの疑似クラスは関連するものを入れて全部で4つあります。記述する順番が決まっているので気を付けましょう。

表示結果は、分かり易いようにタグを付けて表示しているよ。

1．a:link（未訪問時の要素へ指定）

:link疑似クラスは、まだ訪問されていない要素に対してスタイルを指定します。
対象は<a>、<area>、<link>など、href属性を持つ未訪問の要素です。

■ HTML
<a href="#">お問い合わせはコチラ</a>
■ CSS
a:link {
  color: #0FB813;
}

2．a:visited（訪問済みの要素へ指定）

:visited疑似クラスは、ユーザーがすでに訪問したリンクに対してスタイルを指定します。

■ HTML
<a href="#">お問い合わせはコチラ</a>
■ CSS
p {
  color: #ff3c07;
}

3．X:hover（マウス等がホバーした要素へ指定）

:hover疑似クラスは、要素に対してマウス等のポインターがホバーした時のスタイルを指定します。

画像や通常のテキスト等、リンク以外にもスタイルを適用できます。

■ HTML
<a href="#">お問い合わせはコチラ</a>
■ CSS
.sample {
  color: #f7a51b;
}

4．X:active（アクティブな状態の要素へ指定）

:active疑似クラスは、まだ訪問されていない要素に対してスタイルを適用します。
対象は<a>、<button>要素で使われます。

■ HTML
<a href="#">お問い合わせはコチラ</a>
■ CSS
#sample {
  color: #00bce9;
}

「何番目か」絞り込んだ要素に適用する疑似クラス

リストや見出し等、同じ要素が沢山ある時に「絞り込んでスタイルを適用させたい時」に使うと凄く便利です。

5．X:first-child（兄弟要素の中で最初の要素に指定）

よくある使い方は、リストに付けた一番最初の下線やグローバルナビの区切り線を消したり、最初の要素だけ色の変更や余白の調整をするなどですね。

ポイントは、同じ階層の一番最初の要素であるという事。

■ HTML
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>
■ CSS
ul li {
  color: #0a1218;
}
ul li:first-child {
  color: #00bce9;
}

6．X:last-child（兄弟要素の中で最後の要素に指定）

５.のfirst-childと真逆で、リストに付けた一番最後の下線やグローバルナビの区切り線を消したり、最後の要素だけ色の変更や余白の調整をする場合などで使います。

ポイントは、同じ階層の一番最後の要素であるという事。

■ HTML
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>
■ CSS
ul li {
  color: #0a1218;
}
ul li:last-child {
  color: #00bce9;
}

7．X:nth-child(odd,even)（兄弟要素の中で偶数行もしくは奇数行に指定）

nth-child(odd)、nth-child(even)は、それぞれ偶数行、奇数行に対してスタイルを適用できます。
テーブルとかリストの背景をストライプ状にする時なんかに便利です。

■ HTML
<ul>
  <li>リスト 1</li>
  <li>リスト 2</li>
  <li>リスト 3</li>
  <li>リスト 4</li>
</ul>
■ CSS
ul li {
  color: #0a1218;
}
ul li:nth-child(odd) {/*奇数番目のliだけ背景色を変える場合*/
  color: #00bce9;
}
ul li:nth-child(even) {/*偶数番目のliだけ背景色を変える場合*/
  color: #00bce9;
}

8．X:nth-child(An+B)（兄弟要素の中でn番目の要素か絞り込んで指定）

リスト中の「An+B」番目の要素に対してスタイルを指定します。n番目のnは０番目からカウントします。

例えば、:nth-child(3n)なら、3番目[=(3×1)], 6番目[=(3×1)], 9番目[=(3×2)]のように指定できます。
:nth-child(3n+1)なら、1番目[=(3×0)+1], 4番目[=(3×1)+1], 7番目[=(3×2)+1]のように指定できます。

■ HTML
<ul>
  <li>リスト 1</li>
  <li>リスト 2</li>
  <li>リスト 3</li>
  <li>リスト 4</li>
</ul>
■ CSS
ul li {
  color: #0a1218;
}
ul li:nth-child(3) {/*3番目のliだけ背景色を変える*/
  background: #00bce9;
}