7.1 状態疑似クラス
CSSの疑似クラス っていうのは、特定のキーワードで、要素の状態やドキュメント構造内の位置を指定するときにセレクタに追加されるものだよ。 これを使うと、通常のセレクタでは指定できない状態や状況に応じて要素にスタイルを適用できる。
主な疑似クラス:
- 状態疑似クラス
- 構造状態疑似クラス
- フォーム疑似クラス
- ナビゲーション疑似クラス
構文:
セレクタ:疑似クラス {
プロパティ: 値;
プロパティ: 値;
}
状態疑似クラス
これらの疑似クラスは、要素の現在の状態に応じてスタイリングするために使われる。例えば、カーソルを合わせたときやアクティブな要素に対して適用する:
:hover— ユーザーが要素にカーソルを合わせたときに適用する:active— 要素がアクティブになったときに適用する（通常はクリック時）:focus— 要素がフォーカスされたときに適用する（例：キーボード利用時）:visited— 訪問済みのリンクに適用する:link— 未訪問のリンクに適用する
7.2 疑似クラス hover
疑似クラス :hover は、ユーザーが要素にマウスを合わせたときに適用される。 リンクやボタンの見た目を変えるときによく使われる。
構文:
セレクタ:hover {
プロパティ: 値;
プロパティ: 値;
}
例:
このセレクタは、マウスオーバー時にテキストの色を変更してリンクを下線にする。
HTML
<a href="#">リンクダミー</a>
CSS
a:hover {
color: red;
text-decoration: underline;
}
適用例:
- 視覚的なフィードバックによってユーザーインタフェース (UI) を改善する
- ボタンやリンク、その他のインタラクティブ要素に使用される
7.3 疑似クラス focus
疑似クラス :focus は、要素がフォーカスを受けたときに適用される。例えば、クリックしたときやタブキーで移動したとき。主に入力フィールドや他のフォーム要素に使われる。
構文:
セレクタ:focus {
プロパティ: 値;
プロパティ: 値;
}
例:
このセレクタは、フォーカスを受けたときに入力のボーダーカラーを変更し、アウトラインを無くす。
HTML
<input type="text" name="text" id="text">
CSS
input:focus {
border-color: blue;
outline: none;
}
適用例:
- ウェブページのアクセシビリティ (accessibility) を改善する
- フォーカス中にインタラクティブ要素をより目立たせる
7.4 疑似クラス nth-child
疑似クラス :nth-child は、親要素の中での位置に基づいて要素に適用される。 この疑似クラスは、数値、キーワード、式を引数として受け取ることができる。
構文:
セレクタ:nth-child(n) {
プロパティ: 値;
プロパティ: 値;
}
例:
このセレクタは、兄弟要素の位置に基づいてスタイルを適用する。
HTML
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
<li>Element 7</li>
</ul>
CSS
/* すべての奇数の子要素にスタイルを適用 */
li:nth-child(odd) {
background-color: lightgray;
}
/* すべての偶数の子要素にスタイルを適用 */
li:nth-child(even) {
background-color: lightblue;
}
/* 2番目の子要素にスタイルを適用 */
li:nth-child(2) {
color: red;
}
適用例:
- テーブルの行やリスト要素、その他の繰り返し構造をスタイリングする
- 追加のクラスを加えることなく複雑なレイアウトやスタイルを作成する
7.5 疑似クラスの使用例
HTML
<button type="button">ボタン</button>
CSS
button:hover, button:focus {
background-color: darkblue;
color: white;
}
テーブルの偶数行のスタイリング:
HTML
<table>
<tr>
<th>名前</th>
<th>量</th>
<th>価格</th>
</tr>
<tr>
<td>商品 1</td>
<td>5</td>
<td>10 円</td>
</tr>
<tr>
<td>商品 2</td>
<td>3</td>
<td>15 円</td>
</tr>
<tr>
<td>商品 3</td>
<td>8</td>
<td>7 円</td>
</tr>
</table>
CSS
tr:nth-child(even) {
background-color: #f2f2f2;
}
一般的なスタイルから特定の要素を除外:
HTML
<ul>
<li class="list-item">Element 1</li>
<li class="list-item">Element 2</li>
<li class="list-item">Element 3</li>
<li class="list-item">Element 4</li>
<li class="list-item">Element 5</li>
<li class="list-item">Element 6</li>
<li class="list-item">Element 7</li>
</ul>
CSS
.list-item:not(:last-child) {
border-bottom: 1px solid #ddd;
}
GO TO FULL VERSION