Blog

HOME > Web > css > 【CSS】n番目の要素を指定する時に使うセレクタ

【CSS】n番目の要素を指定する時に使うセレクタ

2015/12/20

css

liなどのfloat表示をする際に、いつも３番目、４番目など列の最後で、毎回class指定（class=lastなど）をしていましたが、
下記の参考サイトで簡単な方法がありましたので、備忘録として残します。

参考サイト
【CSS】奇数・偶数・n番目など、要素を指定する時によく使うセレクタまとめ

動的表示など、列の最後をclass指定でうまくいかない場合、
li:nth-child(2)で（）内の数値を指定することでcssの条件を変えることができます。

例えば、３列表示の３番目のmargin-rightを変えたい場合、

li:nth-child(3){ margin-right: 0; }

とすれば、３番目の要素のみmargin-rightが0になるので、
回り込みなどや表示崩れを防ぐことができます。

奇数番目

li:nth-child(odd){ margin-right: 0; }

偶数番目

li:nth-child(even){ margin-right: 0; }

今まで、class指定をしていたので、楽な方法ってあるんですね。

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ