:nth-childと:nth-last-childの違いと使い方

生徒

HTMLで何番目かの要素にだけスタイルを指定したいです

先生

CSSの:nth-childと:nth-last-childの使い方を説明します

特定の順番の要素にだけCSSを指定したい

:nth-childと:nth-last-childについて

:nth-childと:nth-last-childは擬似クラスで、兄弟要素の中の特定の要素を指定できます。

疑似クラスとは

擬似クラスは要素に付加して特定の状態の要素を指定するもので、他にも:hover（マウスポインタが上にある状態）や:visited（訪れたことがあるリンク先）などがあります。

疑似クラスを使用することで、特定の状態の要素を指定したり、HTMLの内容をシンプルにできます。

兄弟要素とは

兄弟要素とは

兄弟要素とは、同じ親要素を持つ同じ階層の要素のことを言います。

同じ階層であれば、異なるタグでも兄弟要素です。

:nth-child(引数)

要素:nth-child(引数) は、兄弟要素の中の要素を指定する擬似クラスで引数で位置を指定します。

要素:nth-child(引数)

引数は必ず指定する必要があります。

:nth-childの前に要素を書く

See the Pen nth-child(2) by mik20621 (@mik20621) on CodePen.

数字の引数を指定する

引数に数字を指定して、何番目の兄弟要素かを指定できます。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

キーワードの引数

引数には数字だけでなく、以下のキーワードが使用できます。

• n・・・ 0以上の数字をあらわす
• odd・・・ 奇数をあらわす
• even・・・ 偶数をあらわす

nは0以上の数字を表すキーワード

nは0以上の数字をあらわすキーワードで、nを0以上の各数字に置き換えたときの要素を指定します。

See the Pen CSS-even by mik20621 (@mik20621) on CodePen.

oddは奇数を表すキーワード

oddはすべての奇数をあらわすキーワードです。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

evenは偶数を表すキーワード

evenはすべての偶数をあらわすキーワードです。

See the Pen CSS-odd by mik20621 (@mik20621) on CodePen.

要素と引数の両方の一致が必要

:nth-childは、指定した要素と引数療法が一致する兄弟要素のみ有効になります。

See the Pen :nth-child by mik20621 (@mik20621) on CodePen.

:nth-last-child(引数)

:nth-last-child(引数) も、兄弟要素の中の特定の要素を指定する擬似クラスで引数で位置を指定します。

:nth-childとの違い

:nth-last-childと:nth-childとの違いは以下になります。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.