:nth-child と nth-of-type の違い

擬似クラス :nth-child() を使ってスタイルを指定する際、意図しない箇所にスタイルが適応されて困ったことはありませんか？
:nth-of-type() だったら狙い通りにスタイルをあてられるかもしれません。

私自身が以前、困ったことがあったので調べたことをまとめました。

目次

• :nth-child() と :nth-of-type() の違い
• n番目 の指定
• 偶数奇数 の指定
• まとめ
• 参考サイト

:nth-child()と:nth-of-type()の違い

どちらも特定の箇所（n番目）の要素を指定する擬似クラスです。
違いは「n番目」の数え方になります。

MDN Web Docsによると

:nth-child()は
兄弟要素のグループの中での位置に基づいて選択

:nth-of-type()は
兄弟要素のグループの中で指定された型 (タグ名) の要素を、位置に基づいて選択

とあります。

n番目 の指定

わかりづらいので具体的なコードで表すと、こんな感じ。
.box 内の6つの要素が兄弟要素となります。

<div class="box">
	<h2 class="title">大見出し</h2>
	<p class="text">1つ目の「.txt」</p>
	<p class="text">2つ目の「.txt」</p>
	<h3 class="subtitle">小見出し</h3>
	<p class="text">3つ目の「.txt」</p>
	<p class="text">4つ目の「.txt」</p>
</div>

上記のようなHTMLで下記のCSSを書いた場合、:nth-child()だと、

.text:nth-child(2){
	color: #eb6567;
}

「1つ目の「.text」」が指定の色（ピンク）になります。

:nth-of-type()だと同じ(2)にしても結果が異なります。
下記の記述だと

.text:nth-of-type(2){
	color: #eb6567;
}

「2つ目の「.text」」が指定の色（ピンク）になります。

これはそれぞれの擬似クラスがどのように数を数えるかの違いによるものです。

:nth-child()では兄弟要素（今回の場合は「.box」内の要素すべて）の中で2番目の要素でクラスに「.text」がついているもののテキストをピンクに。
:nth-of-type()では「.text」というクラスがついているものの中で2番目のテキストをピンクに。

ということになります。

また、:nth-child()は条件に該当する要素がないと、書いたスタイルがどこにも反映されません。

偶数奇数 の指定

私が:nth-child()で最初に「あれ？」と思ったのはこの偶数奇数での指定の時でした。

画像のようなレイアウトにするのに下記のHTMLとCSSを書いたけれど、テキストと画像の位置関係が逆になってしまいました。

<section class="wrap">
	<h2 class="title">見出し</h2>
	<div class="box">
		<p>テキスト1 - 左に配置したい</p>
		<img src="images/photo1.png" alt="" width="400" height="300">
	</div>
	<div class="box">
		<p>テキスト2 - 右に配置したい</p>
		<img src="images/photo2.png" alt="" width="400" height="300">
	</div>
	<div class="box">
		<p>テキスト3 - 左に配置したい</p>
		<img src="images/photo3.png" alt="" width="400" height="300">
	</div>
</section>

<style>
	.box{
		display: flex;
	}
	.box:nth-child(even) p{
		order: 2;
	}
	.box:nth-child(even) img{
		order: 1;
	}
</style>

これは:nth-child()を使用したため、要素の数え方が<h2>（見出し）からスタートしたから。

この場合は、:nth-of-type()を使えば狙い通りの配置になります。

まとめ

:nth- child()を使ってみたけど順番が合わない。:nth- child()が効かない。または偶数と奇数が逆になってしまうけどなんで？と思ったら:nth-of-type()を使ってみるとよいかもです。

参考サイト

:nth-of-type() – CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-of-type

:nth-child() – CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child