生徒HTMLで何番目かの要素にだけスタイルを指定したいです
先生CSSの:nth-of-typeと:nth-last-of-typeの使い方を説明します
特定の順番の要素にだけCSSを指定したい
WEBページで、同じ並びの要素の特定のものにだけスタイルを適用したい場合があります。
そういった場合に使用する、擬似クラスの:nth-of-typeとnth-last-of-typeについて説明します。
ポチップ
:nth-of-typeと:nth-last-of-typeについて
:nth-of-typeとnth-last-of-typeは擬似クラスで、兄弟要素の中の特定の要素を指定するのに使用します（。
疑似クラスとは
擬似クラスは要素に付加して特定の状態の要素を指定するもので、他にも:hover（マウスポインタが上にある状態）や:visited（訪れたことがあるリンク先）などがあります。
兄弟要素とは
兄弟要素とは、同じ親要素を持つ同じ階層の要素のことを言います。
: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以上の数字を表すキーワード
nは0以上の数字をあらわすキーワードで、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.