疑似クラスを使うと、CSSを適用させる対象を柔軟に指定することができます。
主要疑似クラス一覧
主要な疑似クラス一覧です。
| 疑似クラス | 説明 | 使用箇所 |
|---|---|---|
| :link | 未訪問リンクのスタイル | aタグ |
| :visited | 訪問済みリンクのスタイル | aタグ |
| :hover | リンクにカーソルが乗っている時のスタイル | タグ全般 |
| :active | リンクをクリック中の時のスタイル | タグ全般 |
| :first-child | 先頭行のみスタイルを指定する | trタグ、liタグなど |
| :last-child | 最終行のみスタイルを指定する | trタグ、liタグなど |
| :nth-child(n) | ｎ番目の行のみスタイルを指定する | trタグ、liタグなど |
| :nth-child(odd) | 奇数行のみスタイルを指定する | trタグ、liタグなど |
| :nth-child(even) | 偶数行のみスタイルを指定する | trタグ、liタグなど |
| :nth-of-type(n) | n番目の要素のみスタイルを指定する | tdタグなど |
備考
- 疑似クラスは、テーブルの列単位にCSSを定義したい場合や、リンクの状態により適用させるCSSを変更したい場合などに使用します。
コメント