疑似クラスfirst-childとは?
first-childは「該当要素の最初だけにスタイルを適用」するための疑似クラスのことだ。- first=最初
- child=子
1 2 3 4 5 6 7 |
【HTML】 <ul> <li>テレビ</li> <li>ソファ</li> <li>テーブル</li> <li>机</li> </ul> |
プラウザの表示
- テレビ
- ソファ
- テーブル
- 机
1 2 3 4 |
【CSS】 li:first-child { font-weight: bold; } |
プラウザの表示
- テレビ
- ソファ
- テーブル
- 机
1 2 3 4 |
【CSS】 li:first-child { font-weight: bold; } |
1 2 3 4 |
【CSS】 .sample:first-child { font-weight: bold; } |
そもそも疑似クラスとは?
last-childやfirst-childは疑似クラスと呼ばれるけど、 「そもそも疑似クラスってなんだ?」 とCSSを勉強し始めてからずっと思っていた。 疑似クラスとは、「指定した要素が特定の状態にある場合だけにスタイルを適用させる」セレクタだ。 例えば、- リンクの色をマウスが上に乗った時だけ変える
- ユーザーがリンクをクリックした後の場合だけ、リンクの色を変える
- 該当の要素の中で最初の要素だけ
- 該当の要素の中で何番目の要素だけ
- first-childは該当要素の中で最初だけにスタイルを適用させる。
- last-childは該当要素の中で最後だけにスタイルを適用させる。