first-child(last-child)擬似クラスって便利

2014年3月18日
カテゴリ：備忘録(WEB)

:first-child(last-child)を使うと便利なところ

下記のように3つのbox周り全部を10pxにしたい場合。

色々なやり方がありますが、cssだけで、最小限の設定だけで実現する場合、擬似クラスのfirst-childを使うと楽です。
子要素全部に設定されている最初の子要素(最後の子要素はlast-child)を指定することができるのを利用します。

1. .container {

2. 	float: left;

3. 	padding: 10px;

4. }

6. .box {

7. 	float: left;

8. 	width: 100px;

9. 	height: 100px;

10. 	margin-left: 10px;

11. }

擬似classのfirst-childで.boxの一番最初の左だけマージンを0の設定を後に書くことで設定の上書きを行う。

1. .box:first-child {

2. 	margin-left: 0;

3. }

この記事のトラックバック用URL