CSS入門 | CSSセレクター | 疑似要素

疑似要素

疑似要素は、該当HTML要素の特定部分だけを選択するときに使用する。

CSS疑似要素

疑似要素の構文

疑似要素を使用するための構文は次のとおりである。

構文

セレクター::疑似要素名 {プロパティ: プロパティ値;}

CSS1とCSS2では、疑似クラスと疑似要素を表すときに1つのコロン(:)で一緒に表記する。 しかしCSS3では、疑似クラスの表現と疑似要素の表現を区別することになった。 そのため、CSS3では疑似クラスには1つのコロン(:)を、疑似要素には2つのコロン(::)を使用している。

代表的なCSS疑似要素

CSSでよく使用する代表的な疑似要素は次のとおりである。

• ::first-letter
• ::first-line
• ::before
• ::after
• ::selection

::first-letter

この疑似要素は、テキストの最初の1文字だけを選択する。ただし、blockタイプの要素にだけ使用できる。

この疑似要素で使用できるプロパティは次のとおりである。

• fontプロパティ
• colorプロパティ
• backgroundプロパティ
• marginプロパティ
• paddingプロパティ
• borderプロパティ
• text-decorationプロパティ
• text-transformプロパティ
• line-heightプロパティ
• floatプロパティ
• clearプロパティ
• vertical-alignプロパティ。ただし、float値がnoneの場合のみ。

このプロパティを使った例は次のとおりである。

<style>
    p::first-letter { color: #FF4500; font-size: 2em; }
</style>

::first-line

この疑似要素は、テキストの最初の行だけを選択する。ただし、blockタイプの要素にだけ使用できる。

この疑似要素で使用できるプロパティは次のとおりである。

• fontプロパティ
• colorプロパティ
• backgroundプロパティ
• word-spacingプロパティ
• letter-spacingプロパティ
• text-decorationプロパティ
• text-transformプロパティ
• line-heightプロパティ
• clearプロパティ
• vertical-alignプロパティ

<style>
    p::first-line { color: #FF4500; font-size: 2em; }
</style>

::before

この疑似要素は、特定要素のcontent部分の直前に別の要素を挿入するときに使用する。

<style>
    p::before { content: url("/examples/images/img_penguin.png"); }
</style>

::after

この疑似要素は、特定要素のcontent部分の直後に別の要素を挿入するときに使用する。

<style>
    p::after { content: url("/examples/images/img_penguin.png"); }
</style>

::selection

この疑似要素は、該当要素でユーザーが選択した部分だけを選択するときに使用する。

<style>
    p::selection { color: #FF4500; }
</style>

疑似要素の同時適用

1つのHTML要素に複数の疑似要素を同時に適用できる。

<style>
    p::first-letter { color: #FFD700; font-size: 2em; font-weight: bold; }
    p::first-line { color: #FF4500; }
</style>