12月に入って3日目。

インフルエンザがどんどん流行している中、体調管理はしっかりしてくださいね。

いろんなところにクリスマスシーズン！

今年のクリスマスは賑やかになれることを祈ってます。

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

疑似要素「:nth-of-type」の使い方

昨日までは「:nth-child」の解説をしました。

次は、「:nth-of-type」の疑似要素について、説明しますね。

使い方は「:nth-child」と少し似ています。

ul,olのタグと同じように、div,articleなどの親要素があって、子要素に見出しタグやテキストタグなどに適用するときに使います。

<div>
	<h2>見出しタイトル</h2>

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

	<h2>見出しタイトル</h2>

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

	<h2>見出しタイトル</h2>

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

	<h2>見出しタイトル</h2>

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

div h2:first-of-type {
	color: #800080;
	font-size: 120%;
}

見出しタグの一番最初だけ、色が付きました。

使い方はほとんど、「nth-child」と同じなので、要素によって使い分けてみてください。

では、また！