Tweet

Pocket

「nth-child」セレクタを使用すると、要素の何番目かを指定してCSSを設定することが出来ます。

• 3番目のliに　→　li:nth-child(3)
• 奇数のliに　→　li:nth-child(odd)
• 偶数のliに　→　li:nth-child(even)
• 3の倍数のliに（3,6,9,12･･･）　→　li:nth-child(3n)
• 3n+1数番目のliに（1,4,7,10･･･）　→　li:nth-child(3n+1)

参考サイト

• スマートフォンサイトのHTMLコーディングメモ12個