
CSSの擬似要素とは?初心者向けに解説!
CSS擬似要素とは、セレクターに追加されるキーワードで、
選択された要素の特定の部分にスタイルを与えることができます。
例えば、 ::first-line 疑似要素は、pタグの最初の行のフォントを変更するために使用することができます。
p::first-line {
color: blue;
text-transform: uppercase;
}
上記のように実装すると、下記のようにブラウザに表示される。
ちなみに、疑似要素は、1つのセレクタにつき1つだけ使用できます。ステートメント内のシンプルなセレクタの後に配置する必要があります。
[st-cmemo fontawesome=”fa-exclamation-circle” iconcolor=”#ef5350″ bgcolor=”#ffebee” color=”#000000″ bordercolor=”” borderwidth=”” iconsize=””]
注)原則として、シングルコロン(:)ではなく、ダブルコロン(:)を使用してください。これにより、疑似要素と疑似クラスが区別されます。しかし、W3C仕様の古いバージョンではそのような区別はなく、多くのブラウザは元の擬似要素の両方の構文をサポートしています。
[/st-cmemo][st-minihukidashi fontawesome=”” fontsize=”” fontweight=”” bgcolor=”#FFB74D” color=”#fff” margin=”0 0 20px 0″ radius=”” add_boxstyle=””]そのほかの擬似要素の一覧[/st-minihukidashi]
::after (:after) | ::first-letter (:first-letter) | ::part() |
::backdrop | ::first-line (:first-line) | ::placeholder |
::before (:before) | ::grammar-error | ::selection |
::cue | ::marker | ::slotted() |
::cue-region (en-US) | ::spelling-error |