今回は擬似クラスを紹介します。
最初はちょっと難しいかもしれませんが、
覚えるとコーティングがすごく楽になるのでがんばりましょう。

擬似クラスとは？「〇:△」

〇:△ {
    プロパティ:値;
}
 

擬似クラスは、要素が特定の状態にある場合にスタイルを指定するものです。
使用する際は、セレクタと擬似クラスの間を「:(コロン)」で繋ぎます。
上のコードでは〇に普通のセレクタを入れ、△に擬似クラスを入れます。

aタグの擬似クラス

aタグに使われる擬似クラスは4種類あります。
この中の「:hover」は擬似クラスの中で最も使われることが多いです。
ちなみに「:hover」と「:active」はaタグ以外でも使えます。

1. :link
2. :visited
3. :hover
4. :active

未訪問のリンクにスタイルを適用する「a:link」

a:link {
    color:red;
}
 

:linkは、閲覧者が「aタグ」でリンクされている先に
まだ訪問したことがない場合にスタイルが適用されます。

訪問済のリンクにスタイルを適用する「a:visited」

a:visited {
    color:red;
}
 

:visitedは、:linkとは逆に閲覧者が「aタグ」でリンクされている先に
訪問したことがある場合にスタイルが適用されます。

マウスが乗っかている間のみ適用する「a:hover」

a:hover {
    color:red;
}
 

:hoverは、要素の上にマウスが乗っかている間のみスタイルが適用されます。
要素からマウスを離すと元に戻ります。
もし、1度マウスを乗せたら離してもずっとスタイルを適用し続けたいという場合は、
JavascriptやjQueryを使用しましょう。
また、:hoverは、aタグ以外でも使用できます。

クリックしている間のみ適用する「a:active」

a:active {
    color:red;
}
 

:activeは、要素をクリックしている間のみスタイルが適用されます。
:hover同様離すと元に戻ります。
もし、1度クリックしたら離してもずっとスタイルを適用し続けたいという場合は、
JavascriptやjQueryを使用しましょう。
また、:activeは、aタグ以外でも使用できます。

フォーカスされた時に適用する「input:focus」

See the Pen MXmYWw by kiharaneko (@kiharaneko) on CodePen.

:focusは、要素がフォーカスされた時にスタイルを指定します。
例えば、フォームの入力欄にカーソルを合わせてテキスト入力できるようになった状態などです。

何番目の〇〇にスタイルを適用させる

リストなどでたくさん同じタグが並んでいるときに
それぞれ個別にスタイルを適用させたい場合、
全てにclassを付けていくのは大変な作業です。
そんな時に役に立つのが:nth-childと:nth-of-typeです。
説明すると長くなってしまうので、詳しくは個別記事でまとめています。

〇:nth-child(n)

n番目の子となる〇要素にスタイルを適用する際に使用します。

〇:nth-of-type(n)

n番目のその種類の要素にスタイルを適用する際に使用します。