CSSの擬似要素とは？beforeやmarkerなどよく使われる擬似要素についても解説
疑似要素とは
CSS疑似要素は、要素の指定された部分のスタイルを設定するために使用されます。
たとえば、次の目的で使用できます。
- 要素の最初の文字または行のスタイルを設定する
- 要素のコンテンツの前後にコンテンツを挿入する
構文
疑似要素の構文:
::first-line疑似要素
::first-line疑似要素は、テキストの最初の行に特別なスタイルを追加するために使用されます。
次の例では、すべての<p>要素でテキストの最初の行をフォーマットします。
注：::first-line疑似要素は、ブロックレベルの要素にのみ適用できます。
::first-line疑似要素には、次のプロパティが適用されます。
- fontプロパティ
- colorプロパティ
- backgroundプロパティ
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
二重コロン表記に注意してください - ::first-lineと:first-line
二重コロンは、CSS3の疑似要素の単一コロン表記を置き換えました。
これは、疑似クラスと疑似要素を区別するためのW3Cの試みでした。単一コロン構文は、CSS2とCSS1の疑似クラスと疑似要素の両方に使用されていました。
下位互換性のために、単一コロン構文はCSS2とCSS1疑似要素で受け入れられます。
::first-letter疑似要素
::first-letter疑似要素は、テキストの最初の文字に特別なスタイルを追加するために使用されます。
次の例では、すべての<p>要素のテキストの最初の文字を書式設定します。
注：::first-letter疑似要素は、ブロックレベルの要素にのみ適用できます。
::first-letter疑似要素には、次のプロパティが適用されます。
- fontプロパティ
- colorプロパティ
- backgroundプロパティ
- marginプロパティ
- paddingプロパティ
- borderプロパティ
- text-decoration
- vertical-align("float"が"none"の場合のみ)
- text-transform
- line-height
- float
- clear
疑似要素とHTMLクラス
疑似要素は、HTMLクラスと組み合わせることができます。
上記の例では、class="intro"を含む段落の最初の文字が赤色の大きなサイズで表示されます。
複数の疑似要素
複数の疑似要素を組み合わせることもできます。
次の例では、段落の最初の文字が赤色で、xxラージのフォントサイズになります。最初の行の残りは青色で、スモールキャピタルになります。段落の残りの部分は、デフォルトのフォントサイズと色になります。
例
CSS - ::before疑似要素
::before疑似要素を使用して、要素のコンテンツの前にコンテンツを挿入できます。
次の例では、各<h1>要素のコンテンツの前に画像を挿入します。
CSS - ::after疑似要素
::after疑似要素を使用して、要素のコンテンツの後にコンテンツを挿入できます。
次の例では、各<h1>要素のコンテンツの後に画像を挿入します。
CSS - ::marker疑似要素
::marker疑似要素は、リスト項目のマーカーを選択します。
次の例では、リストアイテムのマーカーのスタイルを設定します。
CSS - ::selection疑似要素
::selection疑似要素は、ユーザーが選択した要素の部分と一致します。
次のCSSプロパティを適用できます。::selection:color、background、cursor、 とoutline。
次の例では、選択したテキストを黄色の背景で赤色にします。
すべてのCSS疑似要素
|
セレクタ |
例 |
例の説明 |
|---|---|---|
| ::after | p::after | 各<p>要素のコンテンツの後に何かを挿入します |
| ::before | p::before | 各<p>要素のコンテンツの前に何かを挿入します |
| ::first-letter | p::first-letter | 各<p>要素の最初の文字を選択します |
| ::first-line | p::first-line | 各<p>要素の最初の行を選択します |
| ::marker | ::marker | リスト項目のマーカーを選択します |
| ::selection | p::selection | ユーザーが選択した要素の部分を選択します |
すべてのCSS疑似クラス
|
セレクタ |
例 |
例の説明 |
|---|---|---|
| :active | a:active | アクティブなリンクを選択します |
| :checked | input:checked | チェックされたすべての<input>要素を選択します |
| :disabled | input:disabled | 無効なすべての<input>要素を選択します |
| :empty | p:empty | 子を持たないすべての<p>要素を選択します |
| :enabled | input:enabled | 有効なすべての<input>要素を選択します |
| :first-child | p:first-child | 親の最初の子であるすべての<p>要素を選択します |
| :first-of-type | p:first-of-type | 親の最初の<p>要素であるすべての<p>要素を選択します |
| :focus | input:focus | フォーカスされている<input>要素を選択します |
| :hover | a:hover | マウスオーバーされているリンクを選択します |
| :in-range | input:in-range | 指定された範囲内の値を持つ<input>要素を選択します |
| :invalid | input:invalid | 無効な値を持つすべての<input>要素を選択します |
| :lang(language) | p:lang(it) | 「it」で始まるlang属性値を持つすべての<p>要素を選択します |
| :last-child | p:last-child | 親の最後の子であるすべての<p>要素を選択します |
| :last-of-type | p:last-of-type | 親の最後の<p>要素であるすべての<p>要素を選択します |
| :link | a:link | 未訪問のリンクをすべて選択します |
| :not(selector) | :not(p) | <p>要素ではないすべての要素を選択します |
| :nth-child(n) | p:nth-child(2) | 親の2番目の子であるすべての<p>要素を選択します |
| :nth-last-child(n) | p:nth-last-child(2) | 最後の子から数えて、その親の2番目の子であるすべての<p>要素を選択します |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 最後の子から数えて、その親の2番目の<p>要素であるすべての<p>要素を選択します |
| :nth-of-type(n) | p:nth-of-type(2) | 親の2番目の<p>要素であるすべての<p>要素を選択します |
| :only-of-type | p:only-of-type | 親の唯一の<p>要素であるすべての<p>要素を選択します |
| :only-child | p:only-child | 親の唯一の子であるすべての<p>要素を選択します |
| :optional | input:optional | 「required」属性のない<input>要素を選択します |
| :out-of-range | input:out-of-range | 指定された範囲外の値を持つ<input>要素を選択します |
| :read-only | input:read-only | 「:read-only」属性が指定された<input>要素を選択します |
| :read-write | input:read-write | 「:read-only」属性のない<input>要素を選択します |
| :required | input:required | 「:required」属性が指定された<input>要素を選択します |
| :root | :root | ドキュメントのルート要素を選択します |
| :target | #news:target | 現在アクティブな#news要素を選択します (そのアンカー名を含むURLをクリック) |
| :valid | input:valid | 有効な値を持つすべての<input>要素を選択します |
| :visited | a:visited | 訪問したすべてのリンクを選択します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。