CSS 擬似要素リスト
説明: CSS 擬似要素は、選択された要素に特殊な効果を追加するために使用されます。このドキュメントでは、使用可能なすべての CSS 擬似要素をリストします。
---::after と ::before
主な内容:
- これらの2つの擬似要素は、要素内容の前後にコンテンツを挿入できます。
contentプロパティを使用して、挿入するコンテンツを指定します。contentプロパティと一緒に使用する必要があります。- 簡単なグラフィック要素を作成したり、追加のテキストを追加したりするためによく使用されます。
<style>
p::before {
content: "【開始】 ";
}
p::after {
content: " 【終了】";
}
</style>
<p>これは段落です。</p>出力:
【開始】 これは段落です。 【終了】
---::first-letter
主な内容:
- 要素テキストの最初の文字を選択します。
- ドロップキャップ効果を作成するためによく使用されます。
<style>
p::first-letter {
font-size: 200%;
float: left;
margin-right: 10px;
}
</style>
<p>これは段落です。</p>::first-line
主な内容:
- 要素テキストの最初の行を選択します。
- 最初の行のインデントやその他の特殊なスタイルを設定するためによく使用されます。
<style>
p::first-line {
text-indent: 30px;
}
</style>
<p>これは段落です。これは段落です。</p>::marker
主な内容:
- リスト項目 (
<li>) 要素のマーカー (例: 黒丸、数字、画像) を選択します。 - リスト項目マーカーのスタイルをカスタマイズするために使用できます。
<style>
li::marker {
content: "✓ ";
color: green;
}
</style>
<ul>
<li>リスト項目 1</li>
<li>リスト項目 2</li>
</ul>::selection
主な内容:
- ユーザーが選択した部分に一致します。
- 選択部分の背景色とテキストの色をカスタマイズするために使用できます。
<style>
::selection {
background-color: yellow;
color: black;
}
</style>
<p>これは段落です。</p>::placeholder
主な内容:
- フォーム要素のプレースホルダーテキストを選択します。
- プレースホルダーテキストの色、フォント、その他のスタイルをカスタマイズするために使用できます。
<style>
input::placeholder {
color: gray;
font-style: italic;
}
</style>
<input type="text" placeholder="名前を入力してください">その他の擬似要素
主な内容:
| 擬似要素 | 説明 |
|---|---|
::backdrop |
全画面表示要素 (例: ダイアログ) の背後にある背景を選択します。 |
::cue |
<track> 要素のキュー情報を選択します。 |
::grammar-error |
文法エラーのテキストを選択します。 |
::spelling-error |
スペルエラーのテキストを選択します。 |
::target-text |
text-decoration プロパティが underline または overline に設定され、アクティブ状態のリンクのテキストを選択します。 |
注意:
- 擬似要素によっては、特定のブラウザのサポートが必要になる場合があります。
:first-line、:first-letter、:before、:after擬似要素は CSS 2 で導入されましたが、当時は二重コロン構文はありませんでした。擬似クラスと区別するために、CSS3 以降は擬似要素を表すために二重コロン構文 (::) を使用することをお勧めします。
よくある質問
1. 擬似要素と擬似クラスの違いは何ですか？
擬似クラスは、要素の特定の状態に基づいてスタイルを適用します（例：ホバー状態）。一方、擬似要素は、要素の特定の部分にスタイルを適用します（例：最初の文字）。
2. すべてのブラウザで擬似要素はサポートされていますか？
いいえ、すべての擬似要素がすべてのブラウザでサポートされているわけではありません。新しい擬似要素を使用する場合は、caniuse.com などのウェブサイトでブラウザの互換性を確認してください。
3. 擬似要素を使用して、要素に複数の影を付けることはできますか？
はい、::before と ::after 擬似要素を使用して、要素に複数の影を付けることができます。各擬似要素に異なる影のスタイルを適用します。