とりあえず何も考えずに。ホバーしてみて！！！！！！ほら。楽しくなったでしょ！！！笑

See the Pen by ここあ (@cocoadepon) on CodePen.

チカチカしてる。でもCSS見てみるとまぢで全然難しいことしてなくて。

nth-child()について

CSSを軽く見てもらったらわかると思うねんけど。全てnth-child()で設定してるだけっていうシンプルな作り。

nth-child()は子要素のn番目(nth)と条件を指定する擬似クラスの一つ

書き方としては、

要素 : nth-child( 値 ) { スタイル指定 } _{要素は今回でいうと全ての共通クラス「.btn」がはいる}

セレクタ	指定できる値 ・・・nには0から順番に数字が入っていく
:nth-child(odd)　または :nth-child(2n + 1)	奇数にのみ適用(1.3.5…..)
:nth-child(even)　または :nth-child(2n)	偶数にのみ適用(2.4.6…..)
:nth-child(5)	5番目の要素にのみ適用
:nth-child(5n)	5番目 [=5×1], 10番目[=5×2], 15番目 [=5×3]…
:nth-child(5+n)	5番目以降の要素全てに適用 (5番目 [=5+1], 6番目[=5+2], 7番目 [=5+3]…)
:nth-child(3n+3)	3番目 [=(3×0)+3], 6番目[=(3×1)+3], 9番目 [=(3×2)+3]…
:nth-child(-n+3)	最初の３つの要素に適用 ( 3番目[=-0+3], 2番目[=-1+3], 1番目[=-2+3]..)
p:nth-child(n)	兄弟要素の<p>要素全てに適用
p:nth-child(1)　または p:nth-child(0n+1)	兄弟要素の最初の<p>要素に適用 ( :first-childと同じ*)
p:nth-child(n+5):nth-child(-n+15)	兄弟要素の5~15番目の<p>要素に適用

表で見てみると頭こんがらがるんやけど、nは０から順番に数字が入っていってただ計算式をしてる！馬鹿なうちでもゆっくり考えたら理解できるから難しく考え過ぎなければ多分理解できる！！！！

てことで今回のチカチカで説明すると、

今回は全て共通クラス[box]クラスがついてるのみ！！

:nth-child(odd)

:nth-child(odd)は奇数のみに適用だから下記画像みたいになる。わかりやすいように番号振った。褒めて。

:nth-child(3n)

:nth-child(3n)は3番目 [=3×1], 6番目[=3×2], 9番目 [=3×3]…だから下記画像みたいになる。

:nth-child(-n + 3)

:nth-child(-n + 3) イメージが一番しにくいかもしれないけど、nに０から順番に数字を入れていっても-0 + 3 = 3 /-1 + 3 = 2/-2 + 3 = 1/-3 + 3 = 0…でこれ以上は値がマイナスになるので適用されるものがなくなるので結果、１〜３番目までにスタイルが適用される。って状態！ね！ちょっと考えたら簡単！

:nth-child(1)

これに関しては :nth-child(1)で（）の中の数字で直接何番目かを指定できるんやけど。(1)と(-n + 1)は:first-childセレクターと同じ。

first-childセレクターに関してはじゅんぺいさんが最近ブログで書いてたのでこれ見たらわかりやすい↓

【CSS】擬似クラス:first-childと:first-of-typeの違いとは

こんな感じで擬似クラスを使いこなせるとスタイルを自由に変えれるから、色々お試しあれえええええええ！！！！！！！！

こゆいつ使うん？シリーズでした( ´∀｀)！！！

では！ワードプレスのタームオブジェクトと向き合ってきます！！笑。

ばいちゃ！