疑似クラスとは
・CSSでスタイルを設定する時に、「マウスが乗ったら」「既にクリックされたリンクであったら」という条件が指定できる。
・これを実現するために使用するものが疑似クラスである。
・疑似クラス一覧(公式)
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes
疑似要素とは
・「文字の先頭だけ」といった指定は疑似クラスではできない。この指定をできるのが疑似要素である。
・また、「この要素の前に」「この要素の後に」要素を挿入するといったことも疑似要素を使って実現できる。
・疑似要素一覧(公式)
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements
使い方
/* 疑似クラスでマウスポインタが乗った時にボタンの色を変更する例 */
button:hover {
color: blue;
}
/* 疑似要素で先頭の文字サイズを拡大する例 */
p::first-letter {
font-size: 130%;
}
参考
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements