擬似要素は何ですか？
CSS擬似要素は、要素のスタイル指定された部分に使用されます。
例えば、それがために使用することができます。
- 要素の最初の文字、またはラインを、スタイル
- 前にコンテンツを挿入するか、後に、要素の内容
構文
疑似要素の構文は次のとおりです。
selector::pseudo-element {
property:value;
} | -ダブルコロン記法に注意してください ::first-line対:first-line 二重コロンは、CSS3の擬似要素のための単一のコロン表記を置き換えます。 これは、 擬似クラスと擬似要素を区別するためのW3Cの試みでした。 シングルコロン構文は、擬似クラスとCSS2とCSS1の擬似要素の両方のために使用しました。 下位互換性のために、単一のコロン構文はCSS2とCSS1擬似要素が許容されます。 |
|---|
::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-letter擬似要素
::first-letter擬似要素は、テキストの最初の文字に特別なスタイルを追加するために使用されます。
次の例では、すべてのテキストの最初の文字の書式を設定<p>の要素：
注 ::first-letter擬似要素は、要素レベルのブロックに適用することができます。
次のプロパティはに適用されます::first-letter pseudo-要素：
- fontプロパティ
- colorプロパティ
- backgroundのプロパティ
- marginプロパティ
- paddingプロパティ
- borderプロパティ
- text-decoration
- vertical-align （場合にのみ、 "float"で"none" ）
- text-transform
- line-height
- float
- clear
擬似要素とCSSクラス
擬似要素は、CSSクラスと組み合わせることができます。
上記の例では、と段落の最初の文字が表示されますclass="intro"赤にし、大きなサイズで、。
複数の擬似要素
いくつかの擬似要素は組み合わせることができます。
次の例では、段落の最初の文字はXX-大きなフォントサイズは、赤になります。 最初の行の残りの部分は青、スモールキャップになります。 段落の残りの部分はデフォルトのフォントサイズや色になります。
例
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
} »それを自分で試してみてください CSS - ::before擬似要素
::before擬似要素は、要素のコンテンツの前にいくつかのコンテンツを挿入するために使用することができます。
次の例では、各コンテンツの前に画像を挿入する<h1>要素：
CSS - ::after擬似要素
::after擬似要素は、要素の内容の後にいくつかのコンテンツを挿入するために使用することができます。
次の例では、各コンテンツの後に画像を挿入する<h1>要素：
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 | 各々の第1の行を選択し<p>要素を |
| ::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) | すべての選択<p>で始まるlang属性値を持つ要素を"it" |
| :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) | すべての選択<p>その親の第二子である要素を |
| :nth-last-child(n) | p:nth-last-child(2) | すべての選択<p>最後の子から数えて、その親の第二子である要素を |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | すべての選択<p>秒である要素<p>最後の子から数えて、その親の要素を |
| :nth-of-type(n) | p:nth-of-type(2) | すべての選択<p>秒である要素<p>親の要素を |
| :only-of-type | p:only-of-type | すべての選択<p>のみである要素<p>親の要素を |
| :only-child | p:only-child | すべての選択<p>その親の唯一の子である要素を |
| :optional | input:optional | 選択し<input>なしで要素を"required"属性 |
| :out-of-range | input:out-of-range | 選択<input>指定した範囲外の値を持つ要素 |
| :read-only | input:read-only | 選択<input>を持つ要素"readonly"属性が指定されました |
| :read-write | input:read-write | 選択し<input>なしで要素を"readonly"属性 |
| :required | input:required | 選択<input>を持つ要素"required"指定された属性 |
| :root | root | 文書のルート要素を選択します |
| :target | #news:target | 現在アクティブな選択#news （そのアンカー名を含むURLをクリック）の要素を |
| :valid | input:valid | すべての選択<input>の有効な値を持つ要素を |
| :visited | a:visited | すべての訪問のリンクを選択します |