CSS

The nth selectors in CSS are used to select and apply styles to child elements at specific positions within their parent element.

nth selectors

　CSSの n番目系セレクタは、特定の順番に位置する要素を選択するためのセレクタです。

最初の

:first-child, :first-of-type

最後の

:last-child, :last-of-type

n番目の

:nth-child(n), :nth-of-type(n)

後ろから n番目の

:nth-last-child(n), :nth-last-of-type(n)

１個だけ

:only-child, :only-of-type

-child系と -of-type系の違い

　次のような HTML文書を用意しました。

<div class="container">
	<h2>h2 element for title</h2>
	<p>First p element</p>
	<p>Second p element</p>
	<p>Third p element</p>
</div>

　これに CSSを適用してみます。

　まずは、:first-childを使ってみます。

.container :first-child {
	color: darkred;
}

　:first-childは、最初の要素。親要素の中にある“すべての”子要素の一番最初にある要素。なので、ここのサンプルでは、親要素（div.container）の中にある最初の子要素（h2 element for title）の色が darkredに変わっているのが確認できました。

　次に、:first-of-typeを使ってみます。

.container :first-of-type {
	color: darkgreen;
}

　:first-of-typeは、各要素の最初。親要素の中にある“各”子要素の一番最初にある要素。なので、ここのサンプルでは、親要素（div.container）の中にある h2要素の最初である「h2 element for title」と p要素の最初である「First p element」の２つの色が darkgreenに変わっているのが確認できました。

　次は、p要素を指定して :first-childを使ってみます。

.container p:first-child {
	color: darkred;
}

　これだと、親要素（div.container）の最初の子要素が “p要素ではない”ため色が変わりませんでした。

　次は、p要素を指定して :first-of-typeを使ってみます。

.container p:first-of-type {
	color: darkgreen;
}

　今度は、親要素（div.container）の中にある子要素の中で、p要素の最初の要素である「First p element」のみの色が darkgreenに変わったのが確認できました。

　同じ“最初の要素”を指定する場合でも、-child系と -of-type系では挙動が変わってきますので、それぞれの特徴をしっかりと把握して使い分ける必要があるようです。