【CSS】交互にor倍数ごとにスタイルを適用させる【:nth-of-type()】

コーディング
スポンサーリンク

:nth-of-type()の使い方

このように並べたボックスに、交互に違う色を適用させていきます。

交互にスタイルを適用させる(evenまたはodd)

追加するCSS

:nth-of-type(even)は奇数にだけスタイルを適用させるCSSです。
もちろん:nth-of-type(odd)と書いて偶数側にしてもOKです。

或いは

で2の倍数にだけスタイルを適用させる方法でもOKです。

 

n倍数ごとにスタイルを適用させる

:nth-of-type()の中身を3nにすれば、3の倍数ごとにスタイルを適用させることができます。
同じ要領で4の倍数、5の倍数なども。

コメント

タイトルとURLをコピーしました