CSSの擬似クラス、擬似要素について
事前定義
HTMLの要素
h1, p, div などを指す。
HTMLの属性
# top.html ファイル <h1 class="title">事前定義</h1>
上記の class="title" を属性と言う。
なお、classを属性名、titleを属性値と言う。
セレクター
# top.css ファイル h1 { color: red; } .title { margin: 10px; }
上記の h1 や .title をセレクターと言う。
CSSのプロパティ値を適用するHTMLの要素名や属性などの事。
擬似クラス・擬似要素について
概要
擬似クラスも擬似要素も、付与したHTML要素に適用するCSSの適用スコープを制限するために使う。
擬似クラスは状態に応じてCSSの適用・不適用が決まる。
擬似要素は付与したHTMLの一部分のみにCSSの適用をする。
擬似クラス
h1: hover { color: blue; }
上記の :hover を擬似クラスと言う。
擬似クラスに応じて、 ●●な状態の場合にcssプロパティ値を適用する という条件を付ける事が出来る。
例
:link
付与したセレクターが、まだ訪問していないリンクの状態の場合にcssプロパティ値を適用する
:visited
付与したセレクターが、訪問したリンクの状態の場合にcssプロパティ値を適用する
:target
付与したセレクターのHTMLのid属性名の属性値が、URLのフラグメント（#）に一致する状態の場合にcssプロパティ値を適用する。
これを利用するとJavaScriptを使わずにモーダルなどが実装出来る。 例
:hover
付与したセレクターのHTML要素にマウスポインターを置いている状態の場合にcssプロパティ値を適用する。
:active
付与したセレクターのHTML要素が、クリックされるなど「アクティブ」な状態の場合にcssプロパティ値を適用する。
:focus
付与したセレクターのHTML要素（input）にフォーカスされている状態の場合にcssプロパティ値を適用する。
:focus-within
付与したセレクターのHTML要素（input）にフォーカスされている状態の場合に、focus が適用される要素とその子孫要素にも cssプロパティ値を適用する。
:nth-child(n)
付与したセレクターのHTML要素が、兄弟要素のグループの中で最初からn番目の状態の場合にcssプロパティ値を適用する。
`:nth-last-child(n)
付与したセレクターのHTML要素が、兄弟要素のグループの中で最後からn番目の状態の場合にcssプロパティ値を適用する。
:first-child
付与したセレクターのHTML要素が、兄弟要素のグループの中で最初の順番の状態の場合にcssプロパティ値を適用する。
:last-child
付与したセレクターのHTML要素が、兄弟要素のグループの中で最後の順番の状態の場合にcssプロパティ値を適用する。
:required
付与したセレクターのHTML要素（input, select, textarea）にrequired属性が付与されている状態の場合にcssプロパティ値を適用する。
:invalid
付与したセレクターのHTML要素（input）で検証が失敗している状態の場合にcssプロパティ値を適用する。
:disabled
付与したセレクターのHTML要素（input, select, textarea）にdisabled属性が付与されている状態の場合にcssプロパティ値を適用する。
擬似要素
h1::first-line { color: gold; }
上記の ::first-line を擬似要素と言う。
擬似要素を付与したセレクターの対象のHTMLに対して、擬似要素に応じた特定の箇所にcssプロパティ値を適用する。
例えば ::first-line の場合は、h1というセレクターのHTMLの最初の行だけにcssプロパティ値を適用する。
擬似要素例
::after
付与したセレクターのHTML要素に対して、そのHTML要素の後に子要素を生成して、その子要素の箇所にcssプロパティ値を適用する。
::before
付与したセレクターのHTML要素に対して、そのHTML要素の前に子要素を生成して、その子要素の箇所にcssプロパティ値を適用する。
::placeholder
付与したセレクターのHTML要素（input, textarea）に対して、そのHTML要素のplaceholderの箇所にcssプロパティ値を適用する。
::maker
付与したセレクターのHTML要素（liなど）に対して、そのHTML要素のポチの箇所にcssプロパティを適用する。
::selection
付与したセレクターのHTML要素のうちマウスクリックとドラッグで選択した文書だけにcssプロパティ値を適用する。
::first-line
付与したセレクターのHTML要素のうち最初の行にだけcssプロパティ値を適用する。
::first-letter
付与したセレクターのHTML要素のうち最初の文字にだけcssプロパティ値を適用する。
