CSS 伪クラス

パseudoクラスとは何ですか？

パseudoクラスは要素の特殊な状態を定義するために使用されます。

例えば、以下に使用できます：

  • 要素にマウスを乗せた際のスタイルを設定
  • アクセスしたかどうかのリンクに異なるスタイルを設定
  • 要素がフォーカスを取得した際のスタイルを設定
私の上にマウスを乗せてください

構文

パseudoクラスの構文：

selector:パseudoクラス {
  プロパティ: 値;
}

アンカーのパseudoクラス

リンクは異なる方法で表示できます：

実例

/* ビジットしていないリンク */
a:link {
  color: #FF0000;
}
/* ビジットしたリンク */
a:visited {
  color: #00FF00;
}
/* マウスが乗せられたリンク */
a:hover {
  color: #FF00FF;
}
/* 選択されたリンク */
a:active {
  color: #0000FF;
}

実際に試してみてください

注意：a:hover CSS定義の中で a:link および a:visited それ以降に有効になります！a:active CSS定義の中で a:hover それ以降に有効になります！パseudoクラスの名前は大文字小文字を区別しません。

パseudoクラスとCSSクラス

パseudoクラスはCSSクラスと組み合わせて使用できます：

例のリンクにマウスを乗せると色が変わります：

実例

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

実際に試してみてください

div上にマウスを乗せると

div要素で使用 :hover パseudoクラスの例：

実例

div:hover {
  background-color: blue;
}

実際に試してみてください

シンプルなツールチップのマウスオーバー

マウスを <div> 要素に合わせると <p> 元素が表示されます（ツールチップの効果に似ています）：

上にマウスを合わせると <p> 元素が表示されます。

嘿嘿、私はここにいます！

実例

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

実際に試してみてください

CSS - :first-child 伪類

:first-child 伪類は指定された要素と一致します：その要素は他の要素の最初の子要素です。

最初の <p> 元素にマッチング

以下の例では、選択器は、他の要素の最初の子要素として存在する <p> 元素をマッチングします：

実例

p:first-child {
  color: blue;
}

実際に試してみてください

すべての <p> 元素内の最初の <i> 要素にマッチング

以下の例では、選択器は、すべての <p> 元素内の最初の <i> 要素をマッチングします：

実例

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

実際に試してみてください

最初の <p> 元素内のすべての <i> 要素にマッチング

以下の例では、選択器は、他の要素の最初の子要素として <p> 元素が存在する場合に、その <p> 元素内のすべての <i> 要素をマッチングします：

実例

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

実際に試してみてください

CSS - :lang 伪類

:lang 伪類を使用して、異なる言語に対して特別なルールを定義できます。

以下の例では、:lang lang="en" 属性を持つ <q> 元素に引用符を定義します：

実例

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

実際に試してみてください

さらに多くの例

超リンクに異なるスタイルを追加
この例では、超リンクに他のスタイルを追加する方法を示します。
:focus
:focus 伪類の使用方法を示します。

すべての CSS 伪類

選択子 例 例の説明
:active a:active アクティブなリンクを選択します。
:checked input:checked 選択された <input> 元素を選択します。
:disabled input:disabled 無効な <input> 元素を選択します。
:empty p:empty 子要素を持たない各 <p> 元素を選択します。
:enabled input:enabled 有効な各 <input> 要素を選択します。
:first-child p:first-child 親の最初の子要素の各 <p> 要素を選択します。
:first-of-type p:first-of-type 親の最初の <p> 要素の各 <p> 要素を選択します。
:focus input:focus 焦点を当てた <input> 要素を選択します。
:hover a:hover マウスが乗っているリンクを選択します。
:in-range input:in-range 指定範囲内の値を持つ <input> 要素を選択します。
:invalid input:invalid 無効な値を持つ全ての <input> 要素を選択します。
:lang(language) p:lang(it) lang 属性の値が "it" で始まる各 <p> 要素を選択します。
:last-child p:last-child 親の最後の子要素の各 <p> 要素を選択します。
:last-of-type p:last-of-type 親の最後の <p> 要素の各 <p> 要素を選択します。
:link a:link 未訪問のリンクを選択します。
:not(selector) :not(p) 各非 <p> 要素の要素を選択します。
:nth-child(n) p:nth-child(2) 選択する親の2番目の子要素の各 <p> 要素。
:nth-last-child(n) p:nth-last-child(2) 親の2番目の子要素の各 <p> 要素を選択します。最後の子要素から数えます。
:nth-last-of-type(n) p:nth-last-of-type(2) 親の2番目の <p> 要素の各 <p> 要素を選択します。最後の子要素から数えます。
:nth-of-type(n) p:nth-of-type(2) 選択する親の2番目の <p> 要素の各 <p> 要素。
:only-of-type p:only-of-type 選択する親のユニークな <p> 要素の各 <p> 要素。
:only-child p:only-child 選択する親のユニークな子要素の <p> 元素。
:optional input:optional "required" 属性を持たない <input> 元素を選択します。
:out-of-range input:out-of-range 指定された範囲外の値を持つ <input> 元素を選択します。
:read-only input:read-only "readonly" 属性が指定された <input> 元素を選択します。
:read-write input:read-write "readonly" 属性を持たない <input> 元素を選択します。
:required input:required "required" 属性が指定された <input> 元素を選択します。
:root root 要素のルート要素を選択します。
:target #news:target 現在アクティブな #news 元素を選択します（指定されたアンchor名を含む URLをクリックします）。
:valid input:valid すべての有効な値を持つ <input> 元素を選択します。
:visited a:visited すべてのアクセスしたリンクを選択します。

すべての CSS 仮要素

選択子 例 例の説明
::after p::after 各 <p> 元素の後に内容を挿入します。
::before p::before 各 <p> 元素の前に内容を挿入します。
::first-letter p::first-letter 各 <p> 元素の先頭文字を選択します。
::first-line p::first-line 各 <p> 元素の先頭行を選択します。
::selection p::selection ユーザーが選択した要素の一部を選択します。