疑似クラスとは

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

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

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

構文

疑似クラスの構文:

アンカー疑似クラス

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

疑似クラスと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<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	ユーザーが選択した要素の部分を選択します。