忘備録～nth-child編～

寒い中、体調には気を付けていますか？

インフルエンザも増えてるみたいですが…

日本のCOVID-19の終息はなかなか見えてこないんですね…

マスク生活はいつまで続くねん？

そろそろマスク生活から脱却したいのに！

世界のニュースを見る限り、ほとんどマスクしてない人が多いようなのは、こっちの見解でしょうかね？

日本だけマスク生活を続けてたら余計にしんどくならへん？

そろそろ、政府の役員たち、そろそろマスクなしの生活しても大丈夫ですって発令するのいつぐらいになるねん？

海外のみんなもほぼマスクしとらんがな！

医療崩壊するのが怖いだけなんじゃないかな？

さてと、本題に入ろう！

忘備録～nth-child編～

コーディングするとき、「疑似クラス」を使いますね。

※読み方が「ぎじ」なんだって。こっちが情けない…

nth-childの使い方がほぼ使われるようになってきてますね。

ときどきnth-childを使います。

過去に説明しましたが…

:nth-childが効かない…

今回はもっと応用的な使い方を説明しますね。

※使えるタグが親要素の子要素のみになります。

<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
<li>項目5</li>
</ul>

:first-childと:last-childの数種類の使い方

:first-child{background:#ffe4e1;}/* 最初の1個だけの限定とした疑似クラス */
:last-child{background:#ffe4e1;}/* 最後の1個だけの限定とした疑似クラス */

実行結果

:nth-child(odd)と:nth-child(even)の使い方

:nth-child(odd){background:#ffe4e1;}/* 奇数数字を限定とした疑似クラス */
:nth-child(even){background:#ffe4e1;}/* 偶数数字を限定とした疑似クラス */

実行結果

:nth-child(n)の使い方

:nth-child(1){background:#ffe4e1;}/* 1番目を限定とした疑似クラス */
:nth-child(2){background:#ffe4e1;}/* 2番目を限定とした疑似クラス */
:nth-child(3){background:#ffe4e1;}/* 3番目を限定とした疑似クラス */

実行結果

:nth-child(n+n)の使い方

:nth-child(n+1){background:#ffe4e1;}/* 1番目以降から適用したいときの疑似クラス */
:nth-child(n+2){background:#ffe4e1;}/* 2番目以降から適用したいときの疑似クラス */
:nth-child(n+3){background:#ffe4e1;}/* 3番目以降から適用したいときの疑似クラス */
:nth-child(n+3){background:#ffe4e1;}/* 4番目以降から適用したいときの疑似クラス */

実行結果