CSSでは疑似要素や疑似クラスと呼ばれるセレクタが出てきます。
疑似ってなんだろうと思う人が多いのでは?
しかも使い方が難しい・・・
CSSの基本的な記述は
セレクタ{プロパティ:値;}
となり、セレクタ部分で修飾したいブロックなどを指定する。
このセレクタに対して、疑似要素や疑似クラスを追記する。
セレクタ::疑似要素{プロパティ:値;}
セレクタ:疑似クラス{プロパティ:値;}
なんだか複雑に見てしまう。
なんでこんな事をするのかと言えば、
”CSSには修飾対象のHTMLを書き換える事ができない”
と言うのが、疑似の誕生につながっています。
HTML文章を破壊せずに、CSSだけでさまざまな表現を可能にしたい
と考えた、苦肉の策と言うところでしょうか。
なので、
・要素を追加して修飾を増やしたい
疑似要素 before afterの例 ”文章の前と後ろに括弧を付けたい”「セレクタA」
セレクタA::before {
content: "「";
color: #23cb99;
}
セレクタA::after {
content: "」";
color: #23cb99;
}
要素、つまり追加する表示内容をcontentで指定すれば、セレクタAの前後にその要素”Γ” ”」”が
追加されます。
・状態を判断して新しい修飾に変更したい
疑似クラス hoverの例 ”マウスで選択されたらバックの色を黄色に変更したい”
セレクタA:hover{ background:yellow; }
セレクタAにマウスがのると、ブラウザはセレクタAにhoverと言う状態が発生したと判断し、
CSSのセレクタA:hover{}を適応させて表示します。
疑似クラスと呼んでいますがクラスと言うよりキーワードと呼んだ方がピンときます。
選択された要素に対して特定の状態(キーワード)を指定しておけば、ブラウザが
その状態に対応したセレクタを適応してくれます。
元々の文章であるHTMLを多くの人がそれぞれ個々に修飾できるようにしたのが
CSSなので、そのCSSの機能として、
”HTMLを変更せずに要素やクラスを疑似的に追加できるようにした”
と言う事のようです。