CSS 速習チュートリアル

CSS 疑似クラス

1. 疑似クラスとは

疑似クラス（Pseudo-class）は、要素の特定の状態（ステート）に対してスタイルを定義するために使用されます。

例えば、以下のようなケースで活用されます。

  • ユーザーが要素の上にマウスを置いた（ホバーした）とき
  • 訪問済みリンクと未訪問リンクでスタイルを分けるとき
  • 要素がフォーカスされたとき

1.1 シンタックス

疑似クラスの構文は以下の通りです。

selector:pseudo-class {
  property: value;
}

2. アンカー疑似クラス (Anchor Pseudo-classes)

リンク（<a> タグ）の状態を表示するために、さまざまな疑似クラスが用意されています。

/* 未訪問のリンク */
a:link {
  color: #FF0000;
}

/* 訪問済みのリンク */
a:visited {
  color: #00FF00;
}

/* マウスホバー時 */
a:hover {
  color: #FF00FF;
}

/* 選択中（クリックした瞬間）のリンク */
a:active {
  color: #0000FF;
}

重要: スタイルを定義する順番にはルールがあります。

  1. :hover は :link と :visited の後に定義する必要があります。
  2. :active は :hover の後に定義する必要があります。 つまり、link-visited-hover-active の順序で記述するのが一般的です。

3. 疑似クラスと HTML クラス

疑似クラスは、HTML の class 属性と組み合わせて使用することも可能です。

特定のクラスを持つ要素の上にマウスを置いたときだけ、色を変えるといった指定ができます。

a.highlight:hover {
  color: #ff0000;
}

4. <div> での :hover 利用

:hover 疑似クラスは、リンク以外の要素（<div> など）にも適用できます。

div:hover {
  background-color: blue;
}

5. 簡易的なツールチップの表示

疑似クラスを活用して、マウスホバー時に隠れていた要素を表示させる「ツールチップ」のような挙動を実装できます。

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

6. :first-child 疑似クラス

:first-child 疑似クラスは、ある要素の最初の子要素である特定の要素にマッチします。

6.1 すべての <i> 要素のうち、最初の子要素を選択する

以下の例では、任意の要素内にある最初の <i> 要素を青色にします。

i:first-child {
  color: blue;
}

6.2 すべての <p> 要素内の最初の <i> 要素を選択する

p i:first-child {
  color: blue;
}

7. :lang 疑似クラス

:lang 疑似クラスを使用すると、特定の言語（lang 属性）が指定されている要素に対してスタイルを適用できます。

以下の例では、lang="no"（ノルウェー語）が指定された <q> 要素に対して引用符を定義しています。

<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>一部のテキスト <q lang="no">ノルウェー語の引用文</q> 一部のテキスト</p>

</body>
</html>

8. 全ての CSS 疑似クラス

セレクタ例説明
:activea:activeアクティブな（クリックされている）リンクを選択
:checkedinput:checkedチェックされている input 要素を選択
:disabledinput:disabled無効化されている input 要素を選択
:emptyp:empty子要素を持たない p 要素を選択
:enabledinput:enabled有効な input 要素を選択
:first-childp:first-child親要素の最初の子要素である p 要素を選択
:focusinput:focusフォーカスされている input 要素を選択
:hovera:hoverマウスホバーされているリンクを選択
:invalidinput:invalid値が不正な input 要素を選択
:lang(language)p:lang(it)lang 属性が "it" (イタリア語) で始まる p 要素を選択
:last-childp:last-child親要素の最後の子要素である p 要素を選択
:not(selector):not(p)p 要素ではない要素を選択
:nth-child(n)p:nth-child(2)親要素の 2 番目の子要素である p 要素を選択
:root:rootドキュメントのルート要素を選択
:visiteda:visited訪問済みのすべてのリンクを選択