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

当ページのリンクには広告が含まれています。
  • URLをコピーしました!
生徒

HTMLの特定の要素にだけスタイルを指定したいです

先生

CSSの:nth-of-type:nth-last-of-typeの使い方を説明します

目次

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

WEBページで、同じ並びの要素の特定のものにだけスタイルを適用したい場合があります。

そういった場合に使用する、擬似クラスの:nth-of-typenth-last-of-typeについて説明します。

この記事でわかること
  • HTMLで同じ並びの特定の要素だけにスタイルを指定する方法
  • CSSの:nth-of-typenth-last-of-typeのいろいろな使い方

:nth-of-typeと:nth-last-of-typeについて

:nth-of-typenth-last-of-typeは擬似クラスで、兄弟要素の中の特定の要素を指定するのに使用します(。

nth“は、1st、2nd、3rd、4th・・・をまとめた意味でのnthです。(nは数字を表します。)

疑似クラスとは

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

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

兄弟要素とは

兄弟要素とは

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

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

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

兄弟要素の中の要素を指定する擬似クラスは他に、:nth-child:nth-last-childがありこれらを混同しやすいです。

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

  • :nth-child、:nth-last-childは、兄弟要素の中の何番目かを指定します。
  • :nth-of-type、:nth-last-of-typeは、兄弟要素の中の指定した要素の中で、何番目かを指定します。

:nth-childに付いては以下の記事で説明しています。

:nth-of-typeとnth-last-of-typeの使い方

:nth-of-type(引数)

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

要素:nth-of-type(引数)

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

:nth-of-typeの前に要素を書く

:nth-of-typeの前には、指定する要素を書きます。

要素を何も書かないと、何の要素も該当しないため無効です。

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

数字の引数を指定する

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

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

キーワードの引数

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:nth-last-of-type(引数)

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

:nth-of-typeとの違い

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

  • :nth-of-typeは引数で、先頭から何番目家を指定
  • :nth-last-of-typeは、引数で兄弟要素の末尾からの順番を指定

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

よかったらシェアしてね!
  • URLをコピーしました!
目次