WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > セレクタ一覧 > 疑似要素セレクタ

疑似要素セレクタ指定方法

疑似要素セレクタは指定要素内の特定文字や特定行にスタイルシートを適用することができます。
CSS3より疑似要素と疑似クラスを明確に分けるため、疑似要素はコロンを2つ「::」で表すようになっています。

cssセレクタの書き方左記例の意味
.cl1::first-letter { font-size: 200%; }クラス「cl1」要素の最初の1文字を2倍にする
.cl2::first-line { color: red; }クラス「cl2」要素の最初の1行を赤色にする
.cl3::before { content: "xxx"; }クラス「cl3」要素の先頭にテキスト「xxx」を追加する
.cl4::after { content: "yyy"; }クラス「cl4」要素の最後にテキスト「xxx」を追加する
« 要素/クラス/ID…
主要セレクタ一覧
動的疑似クラス »
広告

疑似要素セレクタ

HTMLの要素(タグ)に対してデザインを指定します。


<style type="text/css">
  .cl1::first-letter { font-size: 200%; }   /* cl1クラスの先頭1文字のみ大きくする */
  .cl2::first-line   { color: red; }        /* cl2クラスの1行目を赤くする        */
  .cl3::before       { content: "●●●"; }  /* cl3クラスの先頭にテキストを追加   */
  .cl4::after        { content: "■■■"; }  /* cl3クラスの先頭にテキストを追加   */
</style>

<p class="cl1">ここは1文字目のみ200%サイズになります</p>
<hr>
<div class="cl2">
    <p>ここは1行目のため赤くなります<br>ここは標準で表示されます</p>
    <p>ここは標準で表示されます</p>
</div>
<hr>
<div>
    <p class="cl3">←先頭にテキストが追加されます</p>
    <p class="cl4">最後にテキストが追加されます→</p>
    <p class="cl3 cl4">←最初と最後にテキストが追加されます→</p>
</div>
<hr>
<div>
    <p class="cl1 cl2 cl3 cl4">すべてを組み合わせると・・・</p>
</div>

ここは1文字目のみ200%サイズになります


ここは1行目のため赤くなります
ここは標準で表示されます

ここは標準で表示されます


←先頭にテキストが追加されます

最後にテキストが追加されます→

←最初と最後にテキストが追加されます→


すべてを組み合わせると・・・

ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン