CSSの擬似要素
CSS擬似要素はいくつかの特殊効果セレクタを追加するために使用されます。
文法
擬似要素構文：
selector:pseudo-element {property:value;}
CSSクラスも擬似要素を使用することができます。
selector.class:pseudo-element {property:value;}
：first-line擬似要素
「ファーストライン「擬似要素は、テキストの最初の行に特別なスタイルを設定するために使用されています。
次の例では、ブラウザはテキスト要素pフォーマットの最初の行のスタイルで「ファーストライン「擬似要素に基づいて行われます：
注：「最初の行」擬似要素は、ブロックレベル要素のために使用することができます。
注：次のプロパティは、「ファーストライン「擬似要素に適用することができます。
- フォントプロパティ
- 色特性
- 背景のプロパティ
- 単語間隔
- 文字間隔
- テキストの装飾
- 垂直アライン
- テキスト変換
- 行の高さ
- クリア
：first-letter擬似要素
「最初の文字「擬似要素は、テキストの最初の文字に特別なスタイルを設定するために使用されます。
注：「最初の文字「擬似要素は、ブロックレベル要素のために使用することができます。
注：次のプロパティは、「最初の文字「擬似要素に適用することができます。
- フォントプロパティ
- 色特性
- 背景のプロパティ
- マージンプロパティ
- パディングプロパティ
- 境界線のプロパティ
- テキストの装飾
- 垂直アライン（「フロート」の場合のみ「なし」）
- テキスト変換
- 行の高さ
- フロート
- クリア
擬似要素とCSSクラス
擬似要素は、CSSクラスと組み合わせることができます。
p.article:first-letter {color:#ff0000;}
<p class="article">A paragraph in an article</p>
<p class="article">A paragraph in an article</p>
段落の記事の最初の文字が赤色に変わりとして上記の例では、すべてのクラスを行います。
複数の擬似要素
擬似要素を複数使用するように組み合わせることができます。
次の例では、文字の最初の段落が赤く表示されます、フォントサイズがXX-大きいです。 残りのテキストの最初の行は、青、小大文字になります。
表示するデフォルトのフォントサイズや色のテキストの残りの段落：
例
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
»をお試しください
CSS - ：擬似要素の前に
擬似要素： "の前に"要素の内容の前に新しいコンテンツを挿入することができます。
各<H1>要素の前に画像を挿入するには、次の例：
CSS - ：擬似要素の後
擬似要素：「後」要素の内容の後に新しいコンテンツを挿入することができます。
次の例では、それぞれの<H1>要素の後に画像を挿入します。
すべてのCSS擬似クラス/要素
| セレクタ | 例 | 例ショー |
|---|---|---|
| ：リンク | a:link | すべての未訪問のリンクを選択します |
| ：訪問 | a:visited | すべての訪問のリンクを選択します |
| ：アクティブ | a:active | 選択は、アクティブリンクであります |
| ：ホバー | a:hover | リンクステータスにマウスを置きます |
| ：フォーカス | input:focus | 入力要素を選択した後、フォーカスを持っています |
| ：最初の文字 | p:first-letter | 各<p>要素の最初の文字を選択 |
| ：ファーストライン | p:first-line | 各<p>要素の最初の行を選択します |
| ：最初の子 | p:first-child | <] P>要素セレクタは、最初の子要素に属する任意の要素にマッチ |
| ：前 | p:before | 各<p>要素の前にコンテンツを挿入します |
| ：後 | p:after | 各<p>要素の後にコンテンツを挿入します |
| ：LANG（言語） | p:lang(it) | 開始値にLANG属性選択<p>要素 |