CSS3のnth-child()の「nth」は何の意味?


nth

CSS3で定義された擬似クラスの「:nth-child()」があります。

nth-child()は、div.target:nth-child(3)のように「何番目の要素」といった指定が出来て便利ですね。

 

似たような擬似要素では、初めの要素を指定する:first-childや、最後の要素を指定する:last-childなどもあります。

:first-childや、:last-childは、その名前から振る舞いがイメージできるのですが、「:nth-child()」はどうもピンときません。

意味がわかった方が記憶しやすいので、「nth」の意味を調べるも何故か見つからず。

 

「nth」って何だろう?と考えていたら、ピンときました。

これ1th、2th、3th、4th、5thのように「Number + th」のことなんですね。

 

あれ、2th、3thじゃなくて、2nd、3rdじゃないの?って思ったんですが、2th、3thは「2周年」といった使い方をするようです。

また、それが転じて番目を2thと使うこともあるようです。

 

ということで、「:nth-child()」の意味がわかりました。あくまで推測ですが……。

違ってたら教えてください。

この記事を書いた人:

ナカシマ

北区赤羽在住のWEBデザイナー兼エンジニア。インターネット、WordPress、本・漫画、音楽が大好き。妻と猫と暮らすアップル信者。

BLOG: 着ぐるみ追い剥ぎペンギン