webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

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

これまでの授業でもCSS3の疑似クラス「:nth-child(odd)」「:nth-child(even)」や「:nth-child(3)」は使って来ましたが、()の内に数式を入れる事で非常に便利になります。

「:nth-child(2n+1)」= 「:nth-child(odd)」(奇数のみ指定)

計算式
 n=0: 2*0+1= 1 = nth-child(1)
 n=1: 2*1+1= 3 = nth-child(3)
 n=2: 2*2+1= 5 = nth-child(5)


「:nth-child(2n)」= 「:nth-child(even)」(偶数のみ指定)

「:nth-child(3n)」= (3の倍数のみ)

「:nth-child(3n+2)」= (2番目から3つずつ)

「:nth-child(n+3)」= (3番目から全部)

「:nth-child(-n+3)」= (3番目まで全部)

nth-child()とnth-of-type()の違い

「nth-child」と「nth-of-type」の違いと使いわけをしっかりと理解しましょう。

E:nth-child(n)

親要素のn番目の子要素であるE要素ということになります。「nth-child」の使い方は授業でも度々やっているので、問題ないと思います。

E:nth-of-type(n)

問題は「nth-of-type」の方です。親要素内で同じE要素内でn番目のものということになります。
言葉にすると判り難い部分もあるので、実際にコーディングしてみましょう。