11月の終わりがあと残り数日…

本格的な寒さになってきましたね。

でも、昼間はちょっと暑さを感じたり寒さを感じてますが、ニュースを見ると北部のほうではもう雪とか始めてるそうですね。

寒さが続く中、インフルエンザも蔓延してるみたいなんですが…

感染しないように気を付けてください。

さてと、話題を取り戻して…

CSSの疑似クラス「:nth-of-type(n)」「:nth-child(n)」の使い方

Webデザインの忘備録として書き込みます。

こっちはいつも、:nth-child(n)をメインにデザインをしたりする機会が多いんです。

例えば、箇条書きの時に、親要素のmarginを入れて、子要素の間にマージンを入れて、子要素の一番最後のところはマージンを解除するときに使ってます。

<ul>
	<li>1番目のリスト</li>
	<li>2番目のリスト</li>
	<li>3番目のリスト</li>
	<li>4番目のリスト</li>
	<li>5番目のリスト</li>
</ul>

ul {
	margin: 0 0 30px 25px;
	padding: 0;
}

ul li {
	list-style-type: disc;
	margin: 0 auto 15px;
	padding: 0;
}

ul li:last-child {
	margin: 0 auto;
}

リストの一番最後に:nth-lastの疑似要素を使っています。

marginの二重構造を避けるためです。

:nth-of-typeはどんな時に使うのか？

また後日に説明しますね。

では、また！