CSS擬似クラスnth-of-typeが予想以上に使える件

nth-of-typeとは

擬似クラスnyh-of-typeは、同じ階層にある同じ要素で指定した順番の要素をセレクトすることができる擬似クラスです。
nth-of-type(odd)で奇数番目の要素、nth-of-type(even)で偶数番目の要素、nth-of-type(3n)で3の倍数の要素、など様々な順番でのセレクトが可能です。

class-name:nth-of-type(odd) {
}

class-name:nth-of-type(even) {
}

class-name:nth-of-type(3n) {
}

これが可能なことで、デザインにもすごい幅が生まれます。
例えば、奇数番目のbackground-colorはblackで、偶数番目のbackground-colorはwhiteとすることで、簡単にシマウマ模様が作れたりなどデザイン性は無限にありそうです。

ぜひ擬似クラスを使用したことのない方は、使用してみてはいかがでしょう。