忘備録～nth-of-type編～
2023年1月7日
寒い中、体調には気を付けていますか？
インフルエンザも増えてるみたいですが…
日本のCOVID-19の終息はなかなか見えてこないんですね…
マスク生活はいつまで続くねん？
そろそろマスク生活から脱却したいのに！
世界のニュースを見る限り、ほとんどマスクしてない人が多いようなのは、こっちの見解でしょうかね？
日本だけマスク生活を続けてたら余計にしんどくならへん？
そろそろ、政府の役員たち、そろそろマスクなしの生活しても大丈夫ですって発令するのいつぐらいになるねん？
海外のみんなもほぼマスクしとらんがな！
医療崩壊するのが怖いだけなんじゃないかな？
さてと、本題に入ろう！
忘備録～nth-of-type編～
コーディングするとき、「疑似クラス」を使いますね。
nth-of-typeほとんど使う機会がないかと思いますが…
過去に説明しましたが…
今回はもっと応用的な使い方を説明しますね。
※使えるタグが親要素の子要素のみになります。
<div class="contents">
<p>1行目 text text text text text text</p>
<p>2行目 text text text text text text</p>
<p>3行目 text text text text text text</p>
<p>4行目 text text text text text text</p>
<p>5行目 text text text text text text</p>
</div>:first-of-typeと:last-of-typeの数種類の使い方
.contents p:first-of-type{color:#dc143c;font-weight:700;}/* 最初の1個だけの限定とした疑似クラス */
.contents p:last-of-type{color:#dc143c;font-weight:700;}/* 最後の1個だけの限定とした疑似クラス */実行結果
:nth-of-type(odd)と:nth-of-type(even)の使い方
.contents p:nth-of-type(odd){color:#dc143c;font-weight:700;}/* 奇数数字を限定とした疑似クラス */
.contents p:nth-of-type(even){color:#dc143c;font-weight:700;}/* 偶数数字を限定とした疑似クラス */実行結果
:nth-child(n)の使い方
.contents p:nth-of-type(1){color:#dc143c;font-weight:700;}/* 1行目を限定とした疑似クラス */
.contents p:nth-of-type(2){color:#dc143c;font-weight:700;}/* 2行目を限定とした疑似クラス */
.contents p:nth-of-type(3){color:#dc143c;font-weight:700;}/* 3行目を限定とした疑似クラス */実行結果
:nth-child(n+n)の使い方
.contents p:nth-of-type(n+1){color:#dc143c;font-weight:700;}/* 1行目以降から適用したいときの疑似クラス */
.contents p:nth-of-type(n+2){color:#dc143c;font-weight:700;}/* 2行目以降から適用したいときの疑似クラス */
.contents p:nth-of-type(n+3){color:#dc143c;font-weight:700;}/* 3行目以降から適用したいときの疑似クラス */
.contents p:nth-of-type(n+3){color:#dc143c;font-weight:700;}/* 4行目以降から適用したいときの疑似クラス */実行結果
では、また！
- Leonardo
- 今日は愛車の点検！ 2024年12月22日
- マーケティングについて考えること 2024年12月21日
- 冬になると手がカサカサになる… 2024年12月20日
- 転職したほうがいい？～Part.2～ 2024年12月19日
- 転職したほうがいい？ 2024年12月18日