::before ::after でわからなくなったので擬似要素、擬似クラスについて

擬似要素も擬似クラスも似たようなもので、CSSのセレクタにさらに特定の条件を追加で指定できる
最終、htmlに書ける。けどhtmlを汚さなくて様々な表現ができるし汎用的らしい。。とあんまりしっくりきてなかった
でもこのサイトを見るとなんとなくすごいなと思ってちゃんと理解したら結構使いやすそうでかなり必要な技術だなって思った

色んな形に HTML CSS でいじれるとは思わなかった

擬似クラス。。
:hover みたいなやつで、その状態によってCSSを当ててくれる、外的要因との関係についてスタイルを適用
ex) 

:link は未訪問のリンク

:visited は訪問済みのリンク

:hover はマウス乗せたとき

:active はクリックしたとき

また、擬似クラスは複数指定できるからもし上のやつを指定するときは、上から順に書いていく

ex)

:nth-of-type() は()の中に数字を入れ、複数あるクラスのなかの何番目の要素だけに CSSをあてたいか指定する
2nで偶数指定みたいにもできる
こういう時困るから似てほぼ同じ要素の :nth-child は割と使い勝手悪め
ちなみに後ろから数える場合は :nth-last-of-type()

:focus  クリックしてフォーカスされた要素にスタイルを適用する

基本  : とコロン一つ

擬似要素。。
::before ::after みたいなやつで本来は存在しなかった文字や要素や画像などが追加できる、選択された要素の特定部分にスタイル付けできるようにするもの

必ず content : "" ;  を空でもいいから入れる 
その中に書いた文字が追加される
またその場合は、display:block;を必ず設定する

あと擬似クラスはよくフォームを作るときに使われるみたい
https://gray-code.com/html_css/pseudo-class-for-form-element/

もし、擬似要素と擬似クラスを一緒に書くときは、、
擬似クラス→擬似要素の順番でかく
:hover::afterみたいな感じ


この記事が気に入ったらサポートをしてみませんか?