擬似クラス系セレクタ
特定の子要素や状態にスタイルを指定することができる。CSSのみで変更する。
- link 擬似クラス リンク先未訪問
セレクタ:link { プロパティ名: 値; } - visited 擬似クラス リンク先訪問済
セレクタ:visited { プロパティ名: 値; } - hover 擬似クラス オンカーソル時（要素にカーソルが乗った時）のスタイルを指定。
スマホの場合は対象の要素をタップしてから他の要素をタップするまでの間。
セレクタ:hover { プロパティ名: 値; } - active 擬似クラス 要素がアクティブになった時のスタイルを指定。リンク先にジャンプ。
アクティブとは要素をクリックしてから離すまでの状態。スマホの場合はタップしている間。
セレクタ:active { プロパティ名: 値; } - first-child/last-child 擬似クラス
先頭（first-child）・最終（last-child）の子要素にスタイルを指定
セレクタ:first-child { プロパティ名: 値; } セレクタ:last-child { プロパティ: 値; } - nth-child 擬似クラス n 番目の子要素にスタイルを指定。
n の部分は「（整数）・odd（奇数）・even（偶数）・（数式）」を指定。
nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）
例えば奇数の子要素の場合は「2n+1」、偶数の子要素の場合は「2n+0」となります。
セレクタ:nth-of-type(n) { プロパティ名: 値; } - not 擬似クラス 親要素内で x を含まない要素を指定。
例えば、「div :not(p) { color: #f00; }」と指定すると、親要素（div タグ）内にある子要素の中で p タグ以外の要素が対象になります。
セレクタ :not(x) { プロパティ名: 値; }
擬似要素系セレクタ
- first-letter 擬似要素 要素の 1 文字目を指定
セレクタ::first-letter { プロパティ: 値; } - first-line 擬似要素 要素の 1 行目を指定
セレクタ::first-line { プロパティ: 値; } - before/after 擬似要素
要素の直前（::before）または直後（::after）へのコンテンツの挿入を指定。
実際に挿入するコンテンツは、content プロパティで指定。
例 .pelement3 p::before {content: “◆”;padding-right: 5px;color: skyblue;}
例 pelement4 p.new::after {content: “New”;padding: 0 5px;margin-left: 10px;
font-size: 0.9em; color: white;vertical-align: top; background: red;border-radius: 5px;}
擬似要素や擬似クラスはまだ難しく、慣れていかないと使えないと思いました。
やりながら覚えていきたいと思います。
コメント