hover ホバー　カーソルを当てると色が変わる　擬似クラスとは擬似要素との違い

2019-07-31 2019-10-11

記事の内容

hover ホバー　カーソルを当てると色が変わる　擬似クラスとは

文書構造の範囲外にある情報や単体セレクタで表現できないものを選択するために導入された概念です

:(コロン)を付けて「:hover」としてＣＳＳで記述します、下の画像の記述はheader内のａ要素にカーソルが乗ったら色がroyalblueに変わるという記述です。

カーソルは見えませんがＨＯＭＥの方にカーソルが乗って色が変わった様子です。

header内のａ要素の記述については下のようになっています、ａ要素にリンク先を指定してＣＳＳでカーソルが乗ったら色が変わるように設定できます。

文章の一文字目や一行目など要素の一部に対して影響を与えることができるのが擬似要素です。

擬似要素と擬似クラスの見た目の違いは「：(コロン)」を擬似要素が二つで擬似クラスが一つ付けるというのが大きな違いです。

最初の一文字目を赤色にしたい場合は

htmlの色を変えたい文章にclassを指定します、ｐ(段落)の文字の色を変更するためにｐにclass名を「geme」とつけて

ＣＳＳの方に「::first-letter」最初の文字を変更する擬似要素を記述しました、色は黒に指定

これが設定された画像です。

両方を使用する場合は擬似クラスを前に擬似要素を後ろに記述します。

簡単なhoverについて書きました、これから擬似要素・擬似クラスのことを書いていきますのでよろしく。

この記事を書いた人

昨年は、コロナのおかげで大変な年でしたが、令和３年はいい年になるように願っています。昨年から投資を始めてみました、始めは危ないイメージでしたが、損をしないようにルールを決めてから始めたので怖いとか危ないとかのイメージはなくなりました。投資の楽しさが分かってもらえるようなものを作っていきたいです。