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
藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

未整理記事

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です