理解して使えるようになれば、非常に便利な疑似クラス。
前回【CSS】疑似クラス last-child とは?初心者でもわかりやすく解説!の記事で、
「該当要素の最後にCSSを適用させる last-child」
について整理したが、今回は
「first-child」
についてプログラミング小僧が理解したことを整理しようと思う。
このままプラウザに表示すると下記のような表示になる。
ここでfirst-childを使えば、最初の<li>テレビ</li>にclassを設定しなくてもリストの最初を太字にすることが可能だ。
※font-weight:boldは文字を太字にする。
このように余計なclassを追加しなくてもスタイルを変更できるので、使いこなせるようになると非常に便利だ。
ちなみに該当要素というのがわかりにくんだけど、
上記の場合は li 要素のことを指し、最初のli要素にスタイルを適用させるって意味になる。
もしこれが
自分で設定したsampleというクラスだったら、そのsampleクラスが設定された要素の中で最初の要素だけに太字が適用されるということになる。
上図のようにfirst-childを適用したいタグ名(今回の例だとliタグ)やclass名の直後に:(コロン)とfirst-childをつければバッチリだ。
疑似クラスに該当するものは全て同じ書き方をすればOKだ。
疑似クラス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は該当要素の中で最後だけにスタイルを適用させる。
first-childの書き方は?
first-childの書き方はlast-childと同じだ。 というか疑似クラスに該当するものは全て書き方は同じだ。