疑似クラスとは

擬似クラスは、要素の特別な状態を定義するために使用されます。

たとえば、次の目的で使用できます。

• ユーザーが要素の上にマウスを置いたときに要素のスタイルを設定する
• 訪問済みリンクと未訪問リンクのスタイルを変える
• 要素がフォーカスされたときにスタイルを設定する

構文

疑似クラスの構文:

アンカー疑似クラス

リンクはさまざまな方法で表示できます。

疑似クラスと HTML クラス

疑似クラスは、HTML クラスと組み合わせることができます。

例のリンクにカーソルを合わせると、色が変わります。

<div> にカーソルを合わせます

使用例:hover<div> 要素の疑似クラス:

シンプルなツールチップホバー

<div> 要素にカーソルを合わせると、<p> 要素が表示されます (ツールチップのように):

CSS - :first-child 疑似クラス

疑似クラス:first-childは、別の要素の最初の子である指定された要素に一致します。

最初の <p> 要素に一致

次の例では、セレクターは任意の要素の最初の子である任意の <p> 要素と一致します。

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

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

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

次の例では、セレクターは、別の要素の最初の子である <p> 要素内のすべての <i> 要素と一致します。

CSS - :lang 疑似クラス

の:lang疑似クラスを使用すると、さまざまな言語用の特別なルールを定義できます。

以下の例では、:lang<q> 要素の引用符を lang="no" で定義します。

その他の例

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

: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	nput:in-range	指定された範囲内の値を持つ <input> 要素を選択します。
:invalid	input:invalid	無効な値を持つすべての <input> 要素を選択します。
:lang(language)	p:lang(it)	「it」で始まる lang 属性値を持つすべての <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	「必須」属性のない <input> 要素を選択します。
:out-of-range	input:out-of-range	指定された範囲外の値を持つ <input> 要素を選択します。
:read-only	input:read-only	「読み取り専用」属性が指定された <input> 要素を選択します。
:read-write	input:read-write	「読み取り専用」属性のない <input> 要素を選択します。
:required	input:required	「必須」属性が指定された <input> 要素を選択します
:root	root	ドキュメントのルート要素を選択します。
:target	#news:target	現在アクティブな #news 要素を選択します 。(そのアンカー名を含む 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> 要素の最初の行を選択します。
::marker	::marker	リスト項目のマーカーを選択します。
::selection	p::selection	ユーザーが選択した要素の部分を選択します。