今回は、擬似要素と擬似クラスの使い方について説明していきます。擬似要素と擬似クラスの違いは、擬似要素は、要素に実際には存在しない部分（前後のコンテンツや最初の文字、行など）にスタイルを適用するのに対し、擬似クラスは、要素の状態（ホバー、フォーカスなど）に基づいてスタイルを適用します。
擬似要素と擬似クラスの使い方
擬似要素と擬似クラスの使い方を分けて説明します。
※よく使うものをまとめて説明しています。詳しくはCSSのリファレンスをご覧ください。
擬似要素
1. ::before
選択した要素の前に生成したコンテンツを挿入
p::before {
content: "★";
color: red;
}- 例: 段落の前に星マークを追加する。
pタグにbeforeでcontentを挿入
2. ::after
選択した要素の後に生成したコンテンツを挿入
p::after {
content: "★";
color: skyblue;
}- 例: 段落の後に星マークを追加する。
pタグにafterでcontentを挿入
3. ::first-letter
要素の最初の文字を装飾
p::first-letter {
font-size: 2em;
color: yellowgreen;
}- 例: 段落の最初の文字を強調する。
最初の文字を強調
4. ::first-line
要素の最初の行を装飾
p::first-line {
font-weight: bold;
text-transform: uppercase;
}- 例: 段落の最初の行を太字にして大文字にする。
段落の最初の行を太字にして大文字に！
※複数行に分かれるテキストでも、最初の行だけが装飾される
5. ::selection
ユーザーが選択したテキストを装飾
p::selection {
background-color: yellow;
color: red;
}- 例: テキストを選択したときの背景色と文字色を変更する。
この段落だけ、選択したときのスタイルが変更されます。
他の段落では、通常の選択スタイルが適用されます。
6. ::placeholder
フォームの入力欄のプレースホルダーのスタイルを変更
input::placeholder {
color: gray;
font-style: italic;
}- 例: プレースホルダーを灰色の斜体にする。
7. ::marker
リスト項目のマーカー（箇条書きの●や番号）を装飾
::marker {
color: red;
font-size: 1.5em;
}- 例: 箇条書きの●を赤色にする。
8. ::backdrop
モーダルやフルスクリーン要素の背後に表示される背景部分を装飾
::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}- 例: モーダルウィンドウの背景を半透明の黒にする。
9. ::file-selector-button
<input type="file"> ファイル選択ボタンを装飾
input[type="file"]::file-selector-button {
background-color: skyblue;
color: white;
padding: 5px 10px;
border: none;
border-radius: 5px;
}- 例: ファイル選択ボタンをカスタマイズする。
10. ::spelling-error
ブラウザが検出したスペルミスの単語を装飾
::spelling-error {
text-decoration: underline wavy red;
}
- 例: スペルミスの下線スタイルを波線にする。
以下のテキストボックスにスペルミス（recieve）を打ち込んでみてください。
（正しくは"receive"）
11. ::placeholder-shown
フォーム入力のプレースホルダーが表示されている状態を装飾
input:placeholder-shown {
background-color: #f0f0f0;
}- 例: プレースホルダーが表示されている間、入力欄の背景色を変更。
擬似クラス
1. :hover
要素にマウスカーソルが乗った時に適用
a:hover {
color: red; /* ホバー時にリンクの色を赤に変更 */
text-decoration-style: wavy; /* 下線を波線に */
}ホバーしてみてください2. :focus
要素がフォーカスされた時に適用
input:focus {
border-color: blue; /* フォーカス時に枠線を青に変更 */
background-color: lightyellow; /* 背景色を薄い黄色に変更 */
}3. :active
要素がアクティブである状態に適用
button:active {
background-color: green; /* クリックされたボタンの背景色を緑に変更 */
color: white; /* 文字色を白に変更 */
}4. :checked
チェックボックスやラジオボタンがチェックされた状態に適用
/* チェックボックスが選択されたときにラベルの色を変更 */
input[type="checkbox"]:checked + label {
color: green; /* チェックされた場合にラベルを緑に */
}
/* チェックボックスが選択されていないときのデフォルトのラベル色 */
label {
color: blue; /* デフォルトは青 */
}まとめ
疑似要素は「指定した要素の一部」に対してスタイルを適用し、疑似クラスは「指定した要素全体」に対してスタイルを適用させるということを覚えておきましょう！
コメント