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

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

目次

1.:link

コード

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

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

サンプル

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

 

2.:visited

コード

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

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

サンプル

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

 

3.:hover

コード

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

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

サンプル

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

:hover

 

4.:active

コード

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

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

サンプル

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

:active

 

5.: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

コード

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

コード

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

コード

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です。

 

9.: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>

サンプル

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

関連の記事

CSSの書き方とセレクタの一覧
CSS 子孫セレクタ/子セレクタ/隣接セレクタ/一般兄弟セレクタのサンプル
CSS 複数のセレクタを指定する/絞り込むサンプル
CSS 属性セレクタのサンプル(要素名[属性名="値"])
CSS 疑似クラスのサンプル(:nth-child/:nth-last-child/:empty/:not)
CSS 疑似要素のサンプル(::first-line/::first-letter/::before/::after)

△上に戻る