CSS

CSSの擬似要素とは?初心者向けに解説!

0
0

CSS擬似要素とは、セレクターに追加されるキーワードで、

 

選択された要素の特定の部分にスタイルを与えることができます。

 

例えば、 ::first-line 疑似要素は、pタグの最初の行のフォントを変更するために使用することができます。

 

p::first-line {
  color: blue;
  text-transform: uppercase;
}

 

 

上記のように実装すると、下記のようにブラウザに表示される。

 

 

ちなみに、疑似要素は、1つのセレクタにつき1つだけ使用できます。ステートメント内のシンプルなセレクタの後に配置する必要があります。

 

注)原則として、シングルコロン(:)ではなく、ダブルコロン(:)を使用してください。これにより、疑似要素と疑似クラスが区別されます。しかし、W3C仕様の古いバージョンではそのような区別はなく、多くのブラウザは元の擬似要素の両方の構文をサポートしています。

 

そのほかの擬似要素の一覧

::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
Pocket
LinkedIn にシェア

りょすけ
毎月3万人以上のプログラマーが訪れるoff.tokyoで、プログラマーさん向けのアンケートを実施しています、アンケートに無料回答すると、他の人の投票も見ることが出来ます!

学びたいプログラミング言語は何ですか?

 vaaaval@gmail.com



  • この記事を書いた人
  • 最新記事

藤沢瞭介(Ryosuke Hujisawa)

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

-CSS

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.