CSS 疑似クラスのサンプル(:link/:visited/:hover/:active/:focus/:target/:lang/:enabledと:disabled/:checked)

CSSの疑似クラスのサンプルです。
擬似クラスは要素の状態に対して指定することができます。

１．:link

まだ見ていないページのリンクにCSSを適用します。
以下はMDNの:linkのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/:link

コード

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

<style>
a:link{
	color:green;
}
</style>
<body >
<a href="https://itsakura.com/" target="_blank">test1</a>
</body>

サンプル

上記コードのサンプルです。

２．:visited

すでに見たページのリンクにCSSを適用します。
以下はMDNの:visitedのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/:visited

コード

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

<style>
a:visited{
	color:red;
}
</style>
<body >
<a href="https://itsakura.com/" target="_blank">test1</a>
</body>

サンプル

上記コードのサンプルです。

３．:hover

マウスカーソルなどが当たるとCSSを適用します。
以下はMDNの:hoverのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/:hover

コード

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

<style>
#test3:hover{
	background-color:LightSkyBlue;
}
</style>
<body >
<p id="test3">:hover</p>
</body>

サンプル

上記コードのサンプルです。文字の上にカーソルを持ってくると背景の色が変わります。

:hover

４．:active

要素をクリックなどアクティブにしたときにCSSを適用します。
以下はMDNの:activeのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/:active

コード

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

<style>
#test4:active{
	background-color:LightSkyBlue;
}
</style>
<body >
<p id="test4">:active</p>
</body>

サンプル

上記コードのサンプルです。文字をクリックすると背景の色が変わります。

:active

５．:focus

テキストボックスの入力欄などの要素にフォーカスが移った時にCSSを適用します。
以下はMDNの:focusのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/:focus

コード

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

<style>
#test5:focus{
	background-color:LightSkyBlue;
}
</style>
<body >
<input type="text" id="test5" maxlength="5" value=":focus">
</body>

サンプル

上記コードのサンプルです。入力欄をクリックしてフォーカスすると背景の色が変わります。

6．:target

#名称のリンクをクリックすると移動先の要素にCSSを適用します。
以下はMDNの:targetのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/:target

コード

2,6行目は、IDセレクタ:targetとなっています。
12,13行目は、リンクをクリックすると14,15行目のリンク先に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>

サンプル

上記コードのサンプルです。リンクをクリックするとリンク先の背景の色と文字の大きさが変わります。

テスト1

テスト2

あいうえお

7．:lang

指定の言語の要素にCSSを適用します。
以下はMDNの:langのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/:lang

コード

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

<style>
p:lang(en){
	background-color:LightSkyBlue;
}
</style>
<body >
<p lang="en">:lang(en)</p>
<p lang="ja">:lang(ja)</p>
</body>

サンプル

上記コードのサンプルです。enを指定した文字のみ背景の色が変わっています。

:lang(en)

:lang(ja)

8．:enabledと:disabled

:enabledは、disabled属性が指定されていない場合にCSSを適用します。
:disabledは、disabled属性が指定されている場合にCSSを適用します。
以下はMDNの:enabledのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/:enabled
以下はMDNの:disabledのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/:disabled

コード

2行目は、:enabledを指定しています。
5行目は、:disabledを指定しています。
11,12行目は、それぞれの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>

サンプル

上記コードのサンプルです。左のテキストボックスは:enabledで、右のテキストボックスは:disabledです。

９．:checked

ラジオボタンやチェックボックスでチェックされた場合にCSSを適用します。
以下はMDNの:checkedのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/:checked

コード

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

サンプル

上記コードのサンプルです。ラジオボタンをチェックすると背景の色が変わります。

赤です黄です青です