擬似クラス

擬似クラス

リンク系

1.#class1 a:link{color: #ff0000;}

→リンクの文字色が赤になる

2.#class1 a:visited{color: #bb00ff;}

→このページは訪問済みなので、文字色が紫になる

3.#class1 a:hover{color: #0000ff;}

→リンクにカーソルを乗せた時に文字色が青くなる

4.#class1 a:active{color:#ff6600;}

→クリックして離すまで（リンク先のページが表示される前の一瞬）オレンジになる

:visitedの内容は:link、:hover、:activeによって上書きされるため上から順に記述します。

n番目の要素にスタイルを適用

1.#class2 div h3に『:nth-child(2){color: #ff0000;}』を設定

→2番目の子要素がh3なら赤になるはず…2番目の子要素はh3ではないので変化なし

2.#class2 div h3に『:first-child{color: #009900;}』を設定

→1番目の子要素がh3なら緑になる

3.class2 div pに『:last-child{color: #990099;}』を設定

→最後の小要素がpなら紫になる

4.class2 div p:first-of-typeに{color: #0000ff;}を設定

→pの中で初めの(小要素2 【p-1】)が青になる

5.class2 div h3に『:nth-of-type(2){color: #ff6600;}』を設定

→h3の中で2番目(小要素5 【h3-2】)がオレンジになる

6.class2 div h3に『:last-of-type{color: #ff3399;}』を設定

→h3の中で最後(小要素7 【h3-3】)がピンクになる

例えば最後のpの下だけマージンを大きくする、などのように使います。
:nth-child(n)と:nth-of-type(n)の違いに注意してください。
:nth-child(n)は子供の種別関係なく、小要素の中で何番めか。(男女関係なく第n子)
:nth-of-type(n)は種類別に、その要素の中で何番めか。（3男とか4女とか）

応用編

1.#class3 ul liに『:nth-of-type(even){background-color: #ffcccc;}』を設定

→偶数行の背景がピンクになる

2.#class3 ul liに『:nth-of-type(3n){color: #3300ff;}』を設定

→3の倍数行の文字が青になる

擬似クラスと擬似要素を組み合わせることもできます。
#class3 ul liに『:nth-of-type(5n+1)::after{content: "★";color: #ff6600;}』を設定すると、5の倍数+1(1,5,11,16…)の後ろにオレンジの★がつきます。