CSSで3の倍数のようなn番目の要素にスタイルを適用する方法！

CSSで兄弟要素のグループ内のn番目の要素にだけスタイルを適用するには:nth-childや;nth-of-typeといった擬似クラスを利用すると実現出来ます。

例えば下記の例では:nth-childを使って兄弟要素のグループ内で2つ目の要素に対してスタイルを適用しています。

:nth-childや:nth-of-typeの使い方については下記を参考にしましょう。

今回はこの:nth-childや:nth-of-typeを使い3の倍数のようなn番目の要素の指定方法について解説していきます。

それではさっそく兄弟要素のグループ内で3の倍数となるn番目の要素にスタイルを適用する方法を解説します。

上記のサンプルコードでは:nth-child(3n)により兄弟要素のグループ内で、3の倍数の順番の要素（要素の種類問わず）に対して文字の色を青にしています。

このように3の倍数であれば:nth-childの引数に3nを、5の倍数であれば5nを指定することによって倍数については対応することが出来ます。

同じ3の倍数の要素でも、要素の種類別に数えた場合で3の倍数となる要素にスタイルを適用させるやり方です。下記のサンプルコードを見てみましょう。

上記のサンプルコードでは3の倍数でもp要素で数えて3の倍数のもの、a要素で数えて3の倍数の要素に対してスタイルが適用されています。

このように同じ3の倍数でも要素問わずなのか、要素別なのかの数え方で異なってきます。:nth-childと:nth-of-typeの使い方に話が戻ることになりますが、両者の違いについても把握しておきましょう。