CSSの疑似クラス「:nth-of-type(n)」「:nth-child(n)」の違い~その2~

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

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

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

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

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

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

CSSの疑似クラス「:nth-of-type(n)」「:nth-child(n)」の違い~その2~

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

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

例えば、見出しの部分に色を付けたいときとか、見出しの色のバリエーションを付けたいときに使うことができます。

<div>
	<h2>タイトル1</h2>

	<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>

	<h2>タイトル2</h2>

	<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>

	<h2>タイトル3</h2>

	<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>

	<h2>タイトル4</h2>

	<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
</div>
div {
	margin: 0 auto 30px;
	padding: 0;
}

div h2 {
	font-size:150%;
	font-weight: 700;
	margin: 0 auto 15px;
	padding: 0;
}

div p {
	margin: 0 auto 30px;
}

div p:last-of-type {
	margin: 0 auto;
}

:last-of-typeを付けて<p>のタグの一番最後のところのmarginが0になります。

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

使い方の意味は分かりましたでしょうか?

では、また!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください