これまでの授業でも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番目のものということになります。
言葉にすると判り難い部分もあるので、実際にコーディングしてみましょう。