CSS 疑似クラス
疑似クラスは要素の特別な状態を定義するために使用されます。
たとえば、以下のような場合に使用できます：
- ユーザーがマウスオーバーしたときに要素のスタイルを設定する
- 訪問済みと未訪問のリンクを異なるスタイルで設定する
- 要素がフォーカスを受け取ったときにスタイルを設定する
selector:pseudo-class {
property: value;
}
アンカー疑似クラス
リンクは異なる方法で表示できます：
/* 訪問していないリンク */
a:link {
color: #FF0000;
}
/* 訪問済みのリンク */
a:visited {
color: #00FF00;
}
/* マウスオーバーしたリンク */
a:hover {
color: #FF00FF;
}
/* 選択されたリンク */
a:active {
color: #0000FF;
}
注意：効果を発揮するためには、a:hoverはa:linkとa:visitedの後に配置する必要があります。a:activeはa:hoverの後に配置する必要があります。疑似クラスの名前は大文字小文字を区別しません。
疑似クラスとHTMLクラスの組み合わせ：
/* 例のリンクにマウスオーバーすると色が変わります */
a.highlight:hover {
color: #ff0000;
}
ホバー効果
<div> 要素に対して :hover 疑似クラスを使用する例：
div:hover {
background-color: blue;
}
シンプルなツールチップのホバー
<div> 要素にカーソルを合わせると <p> 要素が表示される例（ツールチップのように）：
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
:first-child 疑似クラス
:first-child 疑似クラスは、指定された要素が他の要素の最初の子要素である場合にマッチします。
/* 最初の 要素にマッチ */
p:first-child {
color: blue;
}
/* すべての
要素内の最初の 要素にマッチ */
p i:first-child {
color: blue;
}
/* 他の要素の最初の
要素内のすべての 要素にマッチ */
p:first-child i {
color: blue;
}
:lang 疑似クラス
:lang 疑似クラスは、異なる言語に対して特別なルールを定義することができます。
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
さらに多くの例：
ハイパーリンクに異なるスタイルを追加する方法を示す例です。
:focus 疑似クラスの使用方法を示す例です。
| 疑似クラス | 例 | 例の説明 |
|---|---|---|
| :active | a:active | アクティブなリンクを選択します |
| :checked | input:checked | すべてのチェック済みの 要素を選択します |
| :disabled | input:disabled | すべての無効な 要素を選択します |
| :empty | p:empty | 子を持たないすべての 要素を選択します |
| :enabled | input:enabled | すべての有効な 要素を選択します |
| :first-child | p:first-child | 親の最初の子であるすべての 要素を選択します |
| :first-of-type | p:first-of-type | 親の最初の 要素であるすべての 要素を選択します |
| :focus | input:focus | フォーカスを受け取った 要素を選択します |
| :hover | a:hover | マウスオーバー時のリンクを選択します |
| :in-range | input:in-range | 指定された範囲内の値を持つ 要素を選択します |
| :invalid | input:invalid | 無効な値を持つすべての 要素を選択します |
| :lang(language) | p:lang(it) | lang属性値が「it」で始まるすべての 要素を選択します |
| :last-child | p:last-child | 親の最後の子であるすべての 要素を選択します |
| :last-of-type | p:last-of-type | 親の最後の 要素であるすべての 要素を選択します |
| :link | a:link | すべての訪問していないリンクを選択します |
| :not(selector) | :not(p) | 要素でないすべての要素を選択します |
| :nth-child(n) | p:nth-child(2) | 親の2番目の子であるすべての 要素を選択します |
| :nth-last-child(n) | p:nth-last-child(2) | 親の最後から2番目の子であるすべての 要素を選択します |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 親の最後から2番目の 要素であるすべての 要素を選択します |
| :nth-of-type(n) | p:nth-of-type(2) | 親の2番目の 要素であるすべての 要素を選択します |
| :only-of-type | p:only-of-type | 親の唯一の 要素であるすべての 要素を選択します |
| :only-child | p:only-child | 親の唯一の子であるすべての 要素を選択します |
| :optional | input:optional | “required”属性を持たない 要素を選択します |
| :out-of-range | input:out-of-range | 指定された範囲外の値を持つ 要素を選択します |
| :read-only | input:read-only | “readonly”属性が指定されている 要素を選択します |
| :read-write | input:read-write | “readonly”属性が指定されていない 要素を選択します |
| :required | input:required | “required”属性が指定されている 要素を選択します |
| :root | root | ドキュメントのルート要素を選択します |
| :target | #news:target | 現在アクティブな #news 要素を選択します（そのアンカー名を含むURLがクリックされた場合） |
| :valid | input:valid | 有効な値を持つすべての 要素を選択します |
| :visited | a:visited | すべての訪問済みリンクを選択します |