疑似クラス

リンク疑似クラス

　要素名:link　　未訪問のリンク
　要素名:visited　訪問済のリンク

ダイナミック疑似クラス

　要素名:hover　カーソルが乗っている要素
　要素名:active　PCではマウスの左ボタン、タッチデバイスでは画面を押し込んでいる状態
　要素名:focus　 タブキーを使ってリンクエリアにフォーカスしている状態

疑似要素

要素名:after　直前にテキストや画像を挿入
要素名:before　直後にテキストや画像を挿入

条件を表す疑似クラス

:nth-of-type(n)　

同じ要素を数えていく。n番目の要素　nにodd(奇数)、even（偶数）などの指定もできる

3nとすることで３の倍数

:nth-last-of-type(n) 最後からn番目の要素

p:nth-of-type(2){color:red;}　2番目のp要素が赤色になる

:nth-child(n)

親要素内の兄弟関係の要素すべてをカウント

<div>

    <div>div要素</div>

    <p>一つ目のp要素</p>

    <p>二つ目のp要素</p>

    <p>三つ目のp要素</p>

</div>

p:nth-child(3){

  color: red;

}

この場合、親要素のdivの中の子要素3番目を赤文字に変更

1番目はdiv

2番目は1つ目のp

3番目は2つ目のpとなり、この文字が変わる。

:target疑似クラス

ページ内アンカーなどで「ターゲット」とされた要素

ターゲットになった瞬間に適用される

p:target｛

background:red:

}