CSS 疑似クラスのサンプル1

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行目は、リンクをクリックするとリンク先に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となっています。
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が適用されます。
(2行目の#test8 > :enabledの>は、子セレクタです。10行目のtest8の子要素がCSSの適用対象になります。14行目はtest8の子要素ではないのでCSS適用対象外です。)

<style>
#test8 > :enabled{
	background-color:GreenYellow;
}
#test8 > :disabled{
	background-color:LightSkyBlue;
}
</style>
<body >
<div id="test8">
<input type="text" name="t1" value="enabled">
<input type="text" name="t2" value="disabled" disabled>
</div>
<input type="text" name="t3" value="test">
</body>

サンプル

上記コードのサンプルです。左のテキストボックスは:enabledが適用され、右のテキストボックスは:disabledが適用されています。

9.:checked

コード

2行目は、:checkedとなっています。
8,10,12行目のラジオボタンをチェックすると指定した先にCSSが適用されます。
(2行目の#test9 > input:checked + labelの>は、子セレクタです。7行目のtest9の子要素がCSSの適用対象になります。+は、隣接セレクタです。labelがCSSの適用対象になります。)

<style>
#test9 > input:checked + label{
	background-color:GreenYellow;
}
</style>
<body >
<div id="test9">
<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>
</div>
</body>

サンプル

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

関連の記事

CSS セレクタの一覧
CSS セレクタを組み合わせて使うサンプル(子孫セレクタ等)
CSS 複数のセレクタを指定するサンプル
CSS 属性セレクタのサンプル
CSS 疑似クラスのサンプル2(n番目にCSSを適用等)
CSS 疑似要素のサンプル




△上に戻る