【プログラミング学習アウトプットの会!】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と同じ。
今日も学びが加速したね☆
ありがとう!
****************
ランキングに参加しています*応援いただけるとうれしいです