CSS 疑似クラス

擬似クラスとは

疑似クラスは、要素が特定の状態にあるときに適用されるスタイルを指定することができる！！

例えば、:hover 疑似クラスを使用すると、
マウスが要素の上にホバーしたときに異なるスタイルを適用できる🙆🏻‍♀️

:last-child

指定された要素が兄弟要素の中で最後の要素である場合にスタイルを適用！

他にも

:nth-child( )

を設定すると、偶数」、「奇数」、「n番目の要素のみ」、「n番目以降の要素に」
といった具合に、特定して装飾できるようになる🙆🏻‍♀️

他にもよく使う代表的な擬似クラス

a:hover

リンクにカーソルが乗っている状態

a:active

リンクをクリックしている状態

p:first-child

最初に出てくるpタグ

li:nth-child

奇数番目のliタグ

li:nth-child(even)

偶数番目のliタグ

li:nth-child(2)

n番目のliタグ（この場合は2番目）

詳細度

詳細度とは、CSSにおいて、スタイルが適用される優先度を決めるために使用される概念！

以下、詳細度の大きい（優先度の高い）セレクター順
（）は具体的な例

１. Inline style … （<p style="">）
２. IDセレクタ … （#red）
３. 疑似クラス … （:nth-child(n)、:hover）
４. クラスセレクタ … （.blue）
５. タイプセレクタ … （p{...}、h1{...}）
６. 全称セレクタ … （*{...}）

詳細度はWebページ内で一定に保つことが適切！
そのため、一番使いやすいクラスセレクタを使うことが一般的

---

htmlとcssサクサク進めたいけど、演習問題に思ったより時間使っちゃう😂
でも１から自分で考えて作れてるからすごく力になってる気がする！
明日は残業確定だけどなんとか時間捻出する