1.1 擬似クラス
CSSの擬似クラスってのは、セレクターに追加される特別なキーワードで、ドキュメントツリーの状態や位置を示すんだよ。これを使うと、HTMLコードにクラスやIDを追加しなくても、要素の状態や他の要素との関係に基づいてスタイルを適用できるよ。
擬似クラスの基本コンセプト
- 要素の状態を定義する:
- 擬似クラスは、ホバーやフォーカス、アクティブなど、要素の状態を示すことができるよ。
- 要素の位置を定義する:
- 要素の位置を親要素や他の要素に対して示すことができるよ。例えば、最初や最後の要素とかね。
- 特別なケースと論理的グループ:
- 擬似クラスは、そのタイプの最初の要素や奇数/偶数の要素などの特別なケースも定義できるよ。
擬似クラスをどうやって使うのか
擬似クラスはセレクターにコロン (:) を使って追加するよ。これらは要素のセレクター、クラス、ID、その他のセレクターと一緒に使うことができるんだ。
構文:
セレクター:擬似クラス {
プロパティ: 値;
}
使用例
1. 擬似クラス付き要素セレクター
この例では、親要素内の最初の段落 (<p>) がすべて太字になるよ：
CSS
p:first-of-type {
font-weight: bold;
}
2. 擬似クラス付きクラスセレクター
この例では、クラス .button を持つすべての要素の背景が、マウスをホバーしたときに青くなるよ：
CSS
.button:hover {
background-color: blue;
}
3. 擬似クラス付き複合セレクター
この例では、クラス .container を持つ要素内の偶数の段落 (<p>) が赤くなるよ：
CSS
.container > p:nth-child(2n) {
color: red;
}
1.2 擬似クラスの例とその応用
1. 状態を定義する擬似クラス
要素の状態を定義する擬似クラスは、ユーザーのインタラクションや要素の状態に応じてスタイルを変更できるよ。
CSS
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: green;
}
2. 位置を定義する擬似クラス
要素の位置を定義する擬似クラスは、DOM構造内の配置に応じて要素にスタイルを適用できるよ。
CSS
li:first-child {
font-style: italic;
}
li:last-child {
font-style: italic;
}
li:nth-child(odd) {
background-color: #f0f0f0;
}
li:nth-child(even) {
background-color: #ffffff;
}
3. 論理的グループのための擬似クラス
これらの擬似クラスは、論理的なグループやタイプに基づいて要素をスタイリングすることができるよ。
CSS
input:checked {
background-color: yellow;
}
input:disabled {
background-color: grey;
}
input:enabled {
background-color: white;
}
GO TO FULL VERSION