hover ホバー カーソルを当てると色が変わる 擬似クラスとは
擬似クラスとはどんなもの
指定した物全体に影響を与える
文書構造の範囲外にある情報や単体セレクタで表現できないものを選択するために導入された概念です
マウスを当てると色が変わるhoverの使い方
:(コロン)を付けて「:hover」としてＣＳＳで記述します、下の画像の記述はheader内のａ要素にカーソルが乗ったら色がroyalblueに変わるという記述です。
カーソルは見えませんがＨＯＭＥの方にカーソルが乗って色が変わった様子です。
header内のａ要素の記述については下のようになっています、ａ要素にリンク先を指定してＣＳＳでカーソルが乗ったら色が変わるように設定できます。
擬似要素というのもある
擬似要素とはどのようなもの
文章の一文字目や一行目など要素の一部に対して影響を与えることができるのが擬似要素です。
擬似要素と擬似クラスの見た目の違いは「：(コロン)」を擬似要素が二つで擬似クラスが一つ付けるというのが大きな違いです。
記述の要領は
最初の一文字目を赤色にしたい場合は
htmlの色を変えたい文章にclassを指定します、ｐ(段落)の文字の色を変更するためにｐにclass名を「geme」とつけて
ＣＳＳの方に「::first-letter」最初の文字を変更する擬似要素を記述しました、色は黒に指定
これが設定された画像です。
両方を使用する場合は擬似クラスを前に擬似要素を後ろに記述します。
hover ホバー カーソルを当てると色が変わる 擬似クラスとは
簡単なhoverについて書きました、これから擬似要素・擬似クラスのことを書いていきますのでよろしく。
