CSS 擬似クラス – Nagashima Laboratory

:link/:visited/:hover/:active

フォルダ：css_sample_06

擬似クラスとは

セレクターに付加するキーワードで、特定の状態に対するスタイル付けをするときに使います。例えば、マウスカーソルがのったときに反応する機能をつけることができます。

【準備】

共通で使用するindex.htmlとstyle.cssを用意し、css_sample_06 フォルダの中に入れます（共通のデータとは、CSSの基本で使用したデータです。GitHubからもダウンロードできます）
index.htmlにリンクの記述を追加します

▼index.htmlへの追記

<main>
  <p>メイン要素（見出し、本文、画像などの主要な内容）が入ります</p>
  <p><a href="https://www.google.com">リンク</a></p>
</main>

▼style.cssへの追記

a {
  color: royalblue;
}

a:visited {
  color: navy;
}

a:hover {
  color: orange;
}

複数の設定を書く場合は、以下の順（上→下）に記述します（:hoverの設定のあとに、:visitedの設定を書かない）

:link	<a> タグで、href がついているとき
:visited	<a> タグで、リンク先が訪問済みのとき
:hover	その要素にマウスポインタが重なっているとき
:active	その要素の上でマウスボタンがクリックされているとき

【応用】条件に合う部分にスタイル設定をする

ほかにも擬似クラスには、１つ目の要素のみ、最後の要素のみ、偶数番目・奇数番目のみ、など…多様な指定方法があります。

table tr:nth-of-type(even) {
  background-color: gray;
}

:nth-of-type() は、ある順番にある要素に対してスタイルを指定する方法です。上記の例は、even（偶数）を指定して、偶数番目に来る行のみに色をつける設定にしています。ほかに、odd（奇数）、2n（2の倍数：偶数）、3n（3の倍数）などの指定も可能です。

※上記の例を試す場合には、html側にtableタグの入力をしておきます

▼index.htmlへの追記

<h2>一行おきに色をつける</h2>
<table>
  <tr>
    <td>1行目</td>
  </tr>
  <tr>
    <td>2行目（色がつく）</td>
  </tr>
  <tr>
    <td>3行目</td>
  </tr>
  <tr>
    <td>4行目（色がつく）</td>
  </tr>
</table>

作成例：https://ngsm-syr.github.io/css_sample_06/
コード：https://github.com/ngsm-syr/css_sample_06

参考リンク