: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>参考リンク