CSSの疑似クラス「:nth-of-type(n)」「:nth-child(n)」の違い~その2~
2025年11月27日

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の二重構造を避けるためです。
使い方の意味は分かりましたでしょうか?
では、また!






