8.1 基本概念
CSSで疑似クラスと疑似要素を組み合わせると、その状態、構造、内容に基づいて要素をスタイリングする強力で柔軟なセレクタを作成できるよ。これによって、複雑で動的なスタイルを構築するための多くの可能性が生まれ、UIやウェブページの利用体験が向上するんだ。
組み合わせの基礎
疑似クラス
疑似クラスは1つのコロン（:）で示されていて、要素の状態や位置に応じて適用されるよ。例えば：
:hover— 要素にカーソルを合わせたときに適用:first-child— 親の最初の子要素を選択
疑似要素
疑似要素は2つのコロン（::）で示されていて、要素の一部をスタイリングしたり、コンテンツを追加したりするときに使うよ。例えば：
::before— 要素の前にコンテンツを追加::first-letter— 要素の最初の文字をスタイリング
組み合わせ
疑似クラスと疑似要素は組み合わせることで、要素の状態や構造に基づいてスタイルを適用できる複雑なセレクタを作成できるよ。
構文:
セレクタ:疑似クラス::疑似要素 {
プロパティ: 値;
}
8.2 インタラクティビティのための組み合わせ
例 1: ホバー時に最初の文字をスタイリング
この例では、段落にカーソルを合わせたとき、最初の文字が大きくなり赤色に変わるよ：
CSS
/* 段落の最初の文字をホバー時にスタイリングする */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
HTML
<p>この段落にカーソルを合わせて最初の文字が変わるのを見てみてね。</p>
例 2: フォーカス時にリンクの前にコンテンツを追加
この例では、リンクがフォーカスされると、リンクの前にアイコンが追加され、青色に変わるよ：
CSS
/* リンクにフォーカス時、前にアイコンを追加 */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
8.3 構造のスタイリングのための組み合わせ
例 3: div 内の最初の段落をコンテンツ付きでスタイリング
この例では、div内の最初の段落の最初の行が太字になり、緑色に変わるよ：
CSS
/* div 内の最初の段落の最初の行をスタイリング */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
例 4: リストの最後の要素の後に装飾を追加
この例では、リストの最後の要素の後に装飾的な要素が追加され、赤色に変わるよ：
CSS
/* リストの最後の要素の後に装飾を追加 */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
8.4 複雑な条件のための組み合わせ
例 5: 偶数のリスト要素をホバー時にスタイリング
この例では、偶数のリスト要素がホバー時にライトグレーの背景と青色のテキストになるよ：
CSS
/* 偶数のリスト要素をホバー時にスタイリング */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
例 6: 訪問済みかつアクティブなリンクをスタイリング
この例では、訪問済みでアクティブな状態のリンクがオレンジ色になり、下線が付くよ：
CSS
/* 訪問済みかつアクティブなリンクをスタイリング */
a:visited:active {
color: #e67e22;
text-decoration: underline;
}
8.5 実際の実装例
CSS
/* div 内の最初の段落の最初の行をスタイリング */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
/* リストの最後の要素の後に装飾を追加 */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
/* 偶数のリスト要素をホバー時にスタイリング */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
/* リンクにフォーカス時、前にアイコンを追加 */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
/* 段落の最初の文字をホバー時にスタイリングする */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>疑似クラスと疑似要素の組み合わせ例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>div 内の最初の段落です。</p>
<p>div 内の2番目の段落です。</p>
</div>
<ul>
<li>リストアイテム 1</li>
<li>リストアイテム 2</li>
<li>リストアイテム 3</li>
<li>リストアイテム 4</li>
</ul>
<a href="#">フォーカス時にアイコン付きリンク</a>
<p>この段落にカーソルを合わせて最初の文字の効果を見てみてね。</p>
</body>
</html>
GO TO FULL VERSION