CSSのhoverと擬似クラスに関して

2022 9/04

2020.08.31 2022.09.04

トモジ

hoverや擬似クラスって何？
意味と使い方を知りたい！

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。

本記事は、hoverと擬似クラスに関して要点をわかりやすく説明しております。

記事の内容

hoverとは、カーソルを対象物に合わせた時に変化させる事を言いhoverも擬似クラスの一つです。

そして擬似クラスとは、指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。
文章構造の範囲外にある情報によってスタイルを変化させることができます。

わからない単語が多く出てきたかと思いますので、まず単語の意味について説明をしていきます。

セレクタとは、CSS装飾を適用させたいHTML要素を指定するためのもので、
HTML要素以外にセレクタにはクラスやIDを設定する事ができます。

クラスセレクタは[ . ] + [ セレクタ名 ]
idセレクタは[ # ] + [ セレクタ名 ]

擬似クラスとはセレクタに付加するキーワードであり、選択された要素に対して特定の状態を指定します。
非常に様々な擬似クラスが存在しますが、今回は使用頻度が高いものを抜粋して説明していきます。

擬似クラス

:link擬似クラス	未訪問リンクのスタイルを指定
:visited擬似クラス	訪問済みリンクのスタイルを指定
:hover擬似クラス	ユーザーの操作で要素にカーソルなどが乗った際のスタイルを指定
:active擬似クラス	ユーザーの操作で要素がアクティブになった際のスタイルを指定 ※クリックされてから離されるまでの状態
:nth-child(n)	親要素内のn番目の要素を指定してスタイルを適用

<a href="https://10moji-blog.com//what-is-atag/">aタグについてのページ</a>

a:link{
 color: gray;
}

aタグを1回も開いていない状態

<ul>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

li:nth-child(3){
    color: red;
}

同じ要素のn番目のみ装飾ができる

補足で擬似要素についても説明しておきます。
擬似要素とは、文章の１文字目・１行目など要素の一部に対して影響を与える事ができるます。

擬似要素

<p>擬似要素の確認(::before)</p>

p::before{
    content: "⭐️";
}

要素の直前にcontentで記載した文字を表示する

[擬似クラス]
指定したもの全体に影響を与えるもの

[擬似要素]
要素の一部に対して影響を与えるもの

まとめ

今回はCSSのhoverと擬似クラスに関しての説明をしました。

記事のまとめ

擬似クラス

擬似要素