CSSプロパティ辞典WebProgrammingPortalウェブプログラミングポータルログインまたはアカウント作成Cautionお使いのブラウザはJavaScriptが実行できない状態になっております。当サイトはWebプログラミングの情報サイトの為、JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。【CSSセレクタ】E:nth-last-of-type(n)TechAcademy(テックアカデミー)当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。紹介記事はこちらへどうぞ。運営及び開発費用ご支援のお願い当サイト(wp-p.info)の情報はお役に立ちましたでしょうか。当サイトでは運営及び開発費用ご支援の募集をさせて頂いております。よろしければご支援についてご検討頂けませんでしょうか。※ご決済時はPayPal様の決済画面へ遷移します。【CSSセレクタ】E:nth-last-of-type(n)『セレクタ:nth-last-of-type(n)』で、同じ要素名を持つ後ろから数えたn番目の子要素に適用できます。こちらは一般に『擬似クラス』と呼ばれます。IE8以下では動きません。『:nth-last-of-type(n)』との違いは他の要素をカウントするかどうか、というところがあげられます。『p:nth-last-child(2)』と指定した場合、後から数えて2番目の要素がp要素じゃなければ適応されませんが、『p:nth-last-of-type(2)』だと間に別の要素があっても他の要素をカウントせずに2番目のp要素に適応されます。div要素の中の後ろから1番目のp要素を赤字にします。div要素の中の後ろから3番目のp要素を青字にします。div要素の中の後ろから1番目のp要素を赤字にします。div要素の中の後ろから3番目のp要素を青字にします。*/<div><p>ここは1番目のp要素です。</p><div>ここは1番目のdiv要素です。</div><p>ここは2番目のp要素です。</p><div>ここは2番目のdiv要素です。</div><p>ここは3番目の要素です。</p><div>ここは3番目のdiv要素です。『:nth-child』、『:nth-last-child』、『:nth-of-type』、『:nth-last-of-type』の引数の値に『n』を使った場合の『n』には『0を含む自然数の連番』が入っているものとして計算されます。数学における偶数を『2n』、奇数を『2n+1』と表す表記方法と同じです。要素数は『1』から数え始めますが、『n』は『0』から数え始めますのでご注意ください。『2n』と表したときは以下のような形になります。以下省略...『2n+1』と指定した場合は以下になります。以下省略...『6n-3』と指定した場合は以下になります。以下省略...『-2n+3』と指定した場合は以下になります。以下省略...『n+3』と指定した場合は以下になります。以下省略...要素数は『1』から数え始めるため、『0』番目以下の場合は無視されます。標準ブラウザ記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。TechAcademy(テックアカデミー)当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。紹介記事はこちらへどうぞ。トップページへTweetシェアIntroduction当サイトでは有料会員様の募集をしております。現在約431本の記事を公開中です。有料会員になるとこれら全ての記事が読み放題となります。ご購入下されば幸いです。有料会員権はまとめ買いがお得です。