CSS 擬似クラス(:link/:visited/:hover/:active/:focus)

CSS 疑似クラスの特定の状態に対してCSSを適用するサンプルです。

目次

疑似クラス 1.:link (まだ見ていないページのリンク)
  2.:visited (すでに見たページのリンク)
  3.:hover (マウスカーソルなどが当たったとき)
  4.:active (要素をクリックなどでアクティブにしたとき)
  5.:focus (フォーカスが移った時)
  6.:target (移動先の要素にCSSを適用)
  7.:lang (指定の言語の要素)
  8.:enabledと:disabled (disabled属性の指定あり/なし)
  9.:checked (チェックされた場合)

1.:link (まだ見ていないページのリンク)

セレクタ:link{
}
  • まだ見ていないページのリンクにCSSを適用します。
<style>
a:link{
	color:green;
}
</style>
<body >
<a href="https://itsakura.com/" target="_blank">test1</a>
</body>

2行目は、a:linkとなっています。
7行目は、リンクをクリックしていないまたはページを見ていない場合、CSSが適用されます。

上記コードの実行結果です。

 

2.:visited (すでに見たページのリンク)

セレクタ:visited{
}
  • すでに見たページのリンクにCSSを適用します。
<style>
a:visited{
	color:red;
}
</style>
<body >
<a href="https://itsakura.com/" target="_blank">test1</a>
</body>

2行目は、a:visitedとなっています。
7行目は、リンクをクリックしてページを見た場合、CSSが適用されます。

上記コードの実行結果です。

 

3.:hover (マウスカーソルなどが当たったとき)

セレクタ:hover{
}
  • マウスカーソルなどが当たるとCSSを適用します。
<style>
#test3:hover{
	background-color:LightSkyBlue;
}
</style>
<body >
<p id="test3">:hover</p>
</body>

2行目は、IDセレクタ:hoverとなっています。
7行目は、文字にカーソルを当てるとCSSが適用されます。

上記コードのサンプル

文字の上にカーソルを持ってくると背景の色が変わります。

:hover

 

4.:active (要素をクリックなどでアクティブにしたとき)

セレクタ:active{
}
  • 要素をクリックなどでアクティブにしたときにCSSを適用します。
<style>
#test4:active{
	background-color:LightSkyBlue;
}
</style>
<body >
<p id="test4">:active</p>
</body>

2行目は、IDセレクタ:activeとなっています。
7行目は、文字をクリックするとCSSが適用されます。

上記コードのサンプル

文字をクリックすると背景の色が変わります。

:active

 

5.:focus (フォーカスが移った時)

セレクタ:focus{
}
  • テキストボックスの入力欄などの要素にフォーカスが移った時にCSSを適用します。
<style>
#test5:focus{
	background-color:LightSkyBlue;
}
</style>
<body >
<input type="text" id="test5" maxlength="5" value=":focus">
</body>

2行目は、IDセレクタ:focusとなっています。
7行目は、テキストボックスの入力欄をクリックしてフォーカスするとCSSが適用されます。

上記コードのサンプル

入力欄をクリックしてフォーカスすると背景の色が変わります。

 

6.:target (移動先の要素にCSSを適用)

セレクタ:target{
}
  • #名称のリンクをクリックすると移動先の要素にCSSを適用します。
<style>
#a1:target{
	font-size:20px;
	background-color:GreenYellow;
}
#a2:target{
	font-size:20px;
	background-color:LightSkyBlue;
}
</style>
<body >
<p><a href="#a1">テスト1</a></p>
<p><a href="#a2">テスト2</a></p>
<p id="a1">あいうえお</p>
<p id="a2">あいうえお</p>
</body>

2,6行目は、IDセレクタ:targetとなっています。
12,13行目は、リンクをクリックすると14,15行目のリンク先にCSSが適用されます。

上記コードのサンプル

リンクをクリックするとリンク先の背景の色と文字の大きさが変わります。

テスト1

テスト2

あいうえお

あいうえお

 

7.:lang (指定の言語の要素)

セレクタ:lang{
}
  • 指定の言語の要素にCSSを適用します。
<style>
p:lang(en){
	background-color:LightSkyBlue;
}
</style>
<body >
<p lang="en">:lang(en)</p>
<p lang="ja">:lang(ja)</p>
</body>

2行目は、要素セレクタ:langでenを指定しています。
7行目は、CSSが適用されます。

上記コードのサンプル

enを指定した文字のみ背景の色が変わっています。

:lang(en)

:lang(ja)

 

8.:enabledと:disabled (disabled属性の指定あり/なし)

セレクタ:enabled{
}
セレクタ:disabled{
}
  • :enabledは、disabled属性が指定されていない場合にCSSを適用します。
  • :disabledは、disabled属性が指定されている場合にCSSを適用します。
<style>
:enabled{
	background-color:GreenYellow;
}
:disabled{
	background-color:LightSkyBlue;
}
</style>
<body >

<input type="text" name="t1" value="enabled">

<input type="text" name="t2" value="disabled" disabled>

</body>

2行目は、:enabledを指定しています。
5行目は、:disabledを指定しています。
11,12行目は、それぞれのCSSが適用されます。

上記コードのサンプル

左のテキストボックスは:enabledで、右のテキストボックスは:disabledです。

 

9.:checked (チェックされた場合)

セレクタ:checked{
}
  • ラジオボタンやチェックボックスでチェックされた場合にCSSを適用します。
<style>
input:checked + label{
	background-color:GreenYellow;
}
</style>
<body >

<input type="radio" name="cr3" id="c7" value="赤" checked>
<label for="c7">赤です</label>

<input type="radio" name="cr3" id="c8" value="黄">
<label for="c8">黄です</label>

<input type="radio" name="cr3" id="c9" value="青">
<label for="c9">青です</label>

</body>

2行目は、:checkedを指定しています。
8,11,14行目のラジオボタンをチェックすると指定した先にCSSが適用されます。
+は、隣接セレクタです。labelがCSSの適用対象になります。

上記コードのサンプル

ラジオボタンをチェックすると背景の色が変わります。

 

以下はMDNの擬似クラスのリンクです。 
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes

関連の記事

CSSの書き方/コメントとセレクタの一覧
CSS 子孫/子/隣接/一般兄弟セレクタのサンプル
CSS 複数のセレクタを指定する/絞り込むサンプル
CSS 属性セレクタのサンプル(要素名[属性名="値"])
CSS 疑似要素の::beforeと::afterのサンプル

△上に戻る