ソースコードを追いかけて

一見複雑怪奇。 でも、ていねいにコードを追っていくと「みえて」きた! ただいまプログラミング学び中。 勉強になったことなどをメモとしてまとめています。 Java、HTML、CSS、JavaScript、、など。 他、IT系でなるほど〜って思ったことなども。

【CSS】nth-of-typeとnth-child

【プログラミング学習アウトプットの会!】Udemyより

 

 

 

☆疑似セレクター☆

★not
()の中に指定した条件に一致しないものという意味

★first-child

★last-child

★nth-child
例)
div span:nth-child(3) {
 〜スタイル記述〜
}

[HTML]---

<div>
 <span>hoge1</span>
 <span>hoge2</span>
 <span>hoge3</span>
 <span>hoge4</span>
</div>

[HTML]---

→div(の中の) span(要素のうちの)の3番目にだけスタイル適用!
(上の例だとhoge3)

☆:nth-child指定のしかたいろいろ☆

☆:nth-child(2n)→偶数の部分
『n』はnth-childの中で使われると、1、2、3、4…とカウントアップしていく数字なので『2n』で2の倍数を表現する


☆『2n + 1』で奇数
→2だけでなく3、4、と他の数字も指定できるよ

また、

☆偶数even
☆奇数odd
も指定可能!


★:nth-of-type
基本的には:nth-childと同じ。

今日も学びが加速したね☆

ありがとう!

 

****************

 ランキングに参加しています*応援いただけるとうれしいです

ブログランキング・にほんブログ村へにほんブログ村