CSS 疑似クラス(Pseudo-classes)

CSS 疑似クラスは、セレクターに特別な効果を追加するために使用されます。

構文

疑似クラスの構文：

CSS クラスでも疑似クラスを使用できます：

アンカー疑似クラス

CSS をサポートするブラウザーでは、リンクのさまざまな状態をそれぞれ異なる方法で表示できます。

注意：CSS 定義では、a:hover は a:link と a:visited の後に置く必要があります。そうしないと有効になりません。

注意：CSS 定義では、a:active は a:hover の後に置く必要があります。そうしないと有効になりません。

注意：疑似クラスの名前は大文字と小文字を区別しません。

疑似クラスとCSSクラス

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

上記の例で、リンクが訪問済みの場合は赤色で表示されます。

CSS :first-child 疑似クラス

:first-child 疑似クラスを使用すると、親要素の最初の子要素を選択できます。

注意：IE8 より前のバージョンでは宣言が必要です<!DOCTYPE>これにより :first-child が機能します。

最初の <p> 要素に一致

以下の例では、セレクターは任意の要素の最初の子要素である <p> 要素に一致します：

すべての <p> 要素内の最初の <i> 要素に一致

以下の例では、セレクターはすべての <p> 要素内の最初の <i> 要素に一致します：

最初の子要素であるすべての <p> 要素内のすべての <i> 要素に一致

以下の例では、セレクターは要素の最初の子要素である <p> 要素内のすべての <i> 要素に一致します：

CSS - :lang 疑似クラス

:lang 疑似クラスを使用すると、異なる言語に対して特別なルールを定義できます。

注意：IE8 では宣言が必要です<!DOCTYPE>その後、:lang 疑似クラスをサポートできます。

以下の例では、:lang クラスが属性値が no である q 要素の引用符のタイプを定義します：

その他の例

ハイパーリンクにさまざまなスタイルを追加する
この例では、ハイパーリンクに他のスタイルを追加する方法を示します。

:focus を使用する
この例では、:focus 疑似クラスの使用方法を示します。

すべての CSS 疑似クラス/要素