CSS 画面に動きをつける(:hover/:active/:focus他)

CSS の画面に動きをつけるサンプルです。:hoverや:activeや:focus等の擬似クラスです。

目次	１．:link (まだ見ていないページのリンク)
	２．:visited (すでに見たページのリンク)
	３．:hover (マウスカーソルなどが当たったとき)
	４．:active (要素をクリックなどでアクティブにしたとき)
	５．:focus (フォーカスが移った時)
	６．:target (移動先の要素にCSSを適用)
	７．:lang (指定の言語の要素)
	８．:enabledと:disabled (disabled属性の指定あり/なし)
	９．:checked (チェックされた場合)

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

セレクタ:link{
}

a:linkは、まだ見ていないページのリンクにCSSを適用します。

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

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

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

セレクタ:visited{
}

a:visitedは、すでに見たページのリンクにCSSを適用します。

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

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

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

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

:hover

セレクタ:hover{
}

:hoverは、マウスカーソルなどが当たるとCSSを適用します。

<style>
  .p1:hover {
    background-color: LightSkyBlue;
  }
</style>
<body>
  <p class="p1">:hover</p>
</body>

2行目は、:hoverです。
7行目は、文字にカーソルを当てるとCSSが適用されます。

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

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

:active

セレクタ:active{
}

:activeは、要素をクリックなどでアクティブにしたときにCSSを適用します。

<style>
  .p1:active {
    background-color: LightSkyBlue;
  }
</style>
<body>
  <p class="p1">:active</p>
</body>

2行目は、:activeです。
7行目は、文字をクリックするとCSSが適用されます。

５．:focus (フォーカスが移った時)

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

セレクタ:focus{
}

:focusは、テキストボックスの入力欄などの要素にフォーカスが移った時にCSSを適用します。

<style>
  .t1:focus {
    background-color: LightSkyBlue;
  }
</style>
<body>
  <input type="text" class="t1" maxlength="5" value=":focus" />
</body>

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

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

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

テスト1

テスト2

あいうえお

セレクタ:target{
}

: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行目は、:targetです。
12,13行目は、リンクをクリックすると14,15行目のリンク先にCSSが適用されます。

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

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

:lang(en)

:lang(ja)

セレクタ: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が適用されます。

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

左のテキストボックスは:enabledで、右のテキストボックスは: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を指定しています。
10,11行目は、それぞれのCSSが適用されます。

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

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