2024/1/22 (更新日:2024/1/22)

4つの疑似セレクター:hover :active :focus :visitedの挙動を理解して効果的に使おう！

Program

4つの疑似セレクター、:hover :active :focus :visitedの微妙な挙動の違いが分かりますか？

:hover :active :focus :visitedを使い分けることで、読者にあなたが伝えたい意志を視覚的に表現することができるようになります。

ここでは疑似セレクターの挙動を示しながら、使い方を解説します。

１．4つの疑似セレクター:hover :active :focus :visitedの挙動を理解して効果的に使おう！
２．疑似セレクター:hover :active :focus :visited の個別の解説
３．まとめ

１．4つの疑似セレクター:hover :active :focus :visitedの挙動を理解して効果的に使おう！

「　要素：疑似セレクター　」と記述はシンプルです。

個々の挙動を理解して使い分けるのが重要です。

1-1. 疑似セレクター　:hoverの挙動

ポインターが“hoverしている間”

すなわち、

“ポインターが要素の上にある間”、

その要素に対して動作を仕掛ける。

読者に、hoverしている文章や単語：要素を認識してもらう目的で、この中では最もよく使う機能です。

1-2. 疑似セレクター　:activeの挙動

ポインターにより “active状態になっている間”

すなわち、

通常 “ポインターが要素をクリックしている間”、

その要素に対して動作を仕掛ける。

読者に、文章や単語：要素をクリックしてactiveにしている動作を行っていることを認識してもらう目的の機能で、これもよく使います。

1-3. 疑似セレクター　:focusの挙動

ポインターにより “active状態になり選択されてから次の要素をactive にして選択が遷移するまでの間”

すなわち、

通常 “ポインターがA要素をクリックして、次のB要素をクリックするまでの間”、

そのA要素に対して動作を仕掛け続ける。

文章や単語：要素をクリックしてactiveの動作を実行後、他の要素をクリックするまでは今の動作が有効になりますので、有効になっている要素を忘れないように表示する機能です。

1-4. 疑似セレクター　:visitedの挙動

ポインターにより “一旦active状態になったら次にイニシャライズされるまでずっと”

すなわち、

通常 “ポインターが一旦A要素をクリックしたら画面が変わるまでずっと” 、

そのA要素に対して動作を仕掛け続ける。

文章や単語：要素をクリックしてactiveの動作を実行後、どの要素を実行したか最後まで表示し続けて、記録として残す機能です。

具体的な挙動を説明していきます。

２．疑似セレクター:hover :active :focus :visited の個別の解説

2-1. 疑似セレクター　:hoverの個別の解説

挙動

See the Pen hover-motion by Seiji Nakamura (@sjnkmr_777) on CodePen.

コーディング内容

html

<div id="container">
    <a href="#1" class="item">選択記事１</a>
    <a href="#2" class="item">選択記事２</a>
    <a href="#3" class="item">選択記事３</a>
    <a href="#4" class="item">選択記事４</a>
    <a href="#5" class="item">選択記事５</a>
    <a href="#6" class="item">選択記事６</a>
</div>

hrefで定義された場所に遷移する６個の記事（aタグ）を準備します。

それぞれ、各行の中心に配置します。

記事（記事のある行）に対するポインターの動きに応じる要素の挙動で解説いたします。

SCSS

#container{
  width:100%;
}
.item{
  display:block;
  width:100%;
  text-align:center;
}

a{
  font-size: 30px;
  color: aquamarine;
  font-weight:bold;
  &:hover{
    color:tomato;
  }
}

:hover の場合

ポインターが記事の位置にある間だけ、トマト色に文字が変わります。

hover部をCSSになおすと

a:hover { color:tomato; }

2-2. 疑似セレクター　:activeの個別の解説

挙動

See the Pen active-motion by Seiji Nakamura (@sjnkmr_777) on CodePen.

コーディング内容

htmlは、:hoverに同じ

SCSS

#container {
  width: 100%;
}
.item {
  display: block;
  width: 100%;
  text-align: center;
}

a {
  font-size: 30px;
  color: aquamarine;
  font-weight: bold;
  &:active {
    color: gold;
  }
}

:active の場合

ポインターで記事をクリックしている（activeにしている）間だけ、金色に文字が変わります。

active部をCSSになおすと

a:active { color:gold; }

2-3. 疑似セレクター　:focusの個別の解説

挙動

See the Pen focus-motion by Seiji Nakamura (@sjnkmr_777) on CodePen.

コーディング内容

htmlは、:hoverに同じ

SCSS

#container {
  width: 100%;
}
.item {
  display: block;
  width: 100%;
  text-align: center;
}

a {
  font-size: 30px;
  color: aquamarine;
  font-weight: bold;
  &:focus {
    color: navy;
  }
}

:focus の場合

ポインターで記事をクリック（active）にしてから、他の要素をクリックするまでの間だけ、紺色に文字が変わります。

focus部をCSSになおすと

a:focus { color:navy; }

2-4. 疑似セレクター　:visitedの個別の解説

挙動

See the Pen visited-motion by Seiji Nakamura (@sjnkmr_777) on CodePen.

＊文字色のリセットは、画面右下のRerunをクリック

コーディング内容

htmlは、:hoverに同じ

SCSS

#container {
  width: 100%;
}
.item {
  display: block;
  width: 100%;
  text-align: center;
}

a {
  font-size: 30px;
  color:aquamarine;
  font-weight:bold;
  &:visited {
    color: teal;
  }
}

:visited の場合

ポインターで記事を一度クリック（active）にしたら、他の要素をクリックしてもその要素は最期まで、文字色はずっとティール色のままです。

visited部をCSSになおすと

a:visited { color:teal; }