CSS 疑似要素

CSS 疑似要素は、セレクターにいくつかの特殊効果を追加するために使用されます。

構文

疑似要素の構文:

selector:pseudo-element {property:value;}

CSS クラスでも疑似要素を使用できます:

selector.class:pseudo-element {property :value; ;}

: first-line 擬似要素

「first-line」擬似要素は、テキストの最初の行に特別なスタイルを設定するために使用されます。

次の例では、ブラウザは「first-line」疑似要素のスタイルに従って p 要素のテキストの最初の行を書式設定します。 [例の実行] ボタンをクリックして、オンラインの例を表示します

注:

「first-line」疑似要素は、ブロックレベルの要素にのみ使用できます。

注: 次の属性を「最初の行」疑似要素に適用できます:

font 属性

color 属性

letter-spacingプロパティ
text-decorationプロパティ
vertical-alignプロパティ
text-transformプロパティ
line-heightプロパティ
clearプロパティ
"first-letter" 擬似要素は、テキストの最初の文字に特別なスタイルを設定するために使用されます:

例

<!DOCTYPE html>
<html>
<head>
<style>
p:first-line 
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>

<body>
<p>可以使用:first-line伪元素为文本的第一行添加特殊效果。测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！
</p>
</html>

例を実行»

「実行」をクリックします「例」ボタンをクリックして、オンライン例を表示します

注:

「最初の文字」擬似要素は、ブロックレベルの要素にのみ使用できます。

注: 次の属性を「最初の文字」擬似要素に適用できます:

font 属性

color 属性

background 属性

margin 属性
padding属性
border属性
text-decoration属性
vertical-align属性(float: noneの場合のみ)
text-transform属性
line-height属性
float 属性
clear 属性
疑似要素は CSS クラスと組み合わせることができます:
p.article:first-letter {color:#ff000 0 ;}
< p class="article">記事の段落</p>

上記の例では、クラス記事を含むすべての段落の最初の文字が赤色に変わります。

複数の擬似要素

は、複数の擬似要素と組み合わせて使用できます。

以下の例では、段落の最初の文字が赤色で表示され、フォントサイズはxx-largeになります。最初の行の残りのテキストは青色で、小さな大文字で表示されます。

段落内の残りのテキストはデフォルトのフォントサイズと色で表示されます:

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-letter 
{
	color:#ff0000;
	font-size:xx-large;
}
</style>
</head>

<body>
<p>你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式！</p>
</body>
</html>

例を実行する»

オンライン例を表示するには、「例を実行」ボタンをクリックしてください

CSS - :before 擬似要素

":before" 擬似要素は、要素のコンテンツの前に新しいコンテンツを挿入できます。

次の例では、各 <h1> 要素の前に画像を挿入します:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-letter
{
	color:#ff0000;
	font-size:xx-large;
}
p:first-line 
{
	color:#0000ff;
	font-variant:small-caps;
}
</style>
</head>

<body>
<p>你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母设置特殊样式。</p>
</body>
</html>

インスタンスの実行»

オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックします

CSS - : after 疑似要素

":after" 疑似要素は、要素のコンテンツの後に新しいコンテンツを挿入できます。

次の例では、各 <h1> 要素の後に画像を挿入します:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1:after {content:url(http://img.php.cn/upload/article/000/000/015/5c6a721a166be932.gif);}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p>
</body>
</html>

インスタンスの実行 »

オンラインインスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

すべての CSS 疑似クラス/要素

リンク上のステータス input:focus 入力後にフォーカスする要素を選択 p:first-letter 各 < p> の最初の文字を選択要素p:first-line 各 <p> 要素の最初の行を選択しますp:before:after p:after各 <p> 要素の後にコンテンツを挿入します languagep:lang(it)

セレクター	例	例の説明
:link	a:link	未訪問のリンクをすべて選択
:訪問しました	a:visited	訪問したリンクをすべて選択
:active	a:active	アクティブなリンクを選択
:hover	a:hover
:focus
:first-letter
:first-line
:first-child	セレクターは、各 <p> 要素の最初の子である <]p> 要素に一致します

	:lang(	)
の lang 属性の開始値を選択します<p>要素	← CSS疑似クラス CSSナビゲーションバー → 提出するホームページ動画に質問私の PHP中国語ウェブサイトホームページコース記事に質問辞書マニュアルダウンロード検索 APPダウンロード

CSS 疑似要素