忘備録～nth-of-type編～

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

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

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

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

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

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

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

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

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

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

さてと、本題に入ろう！

忘備録～nth-of-type編～

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

nth-of-typeほとんど使う機会がないかと思いますが…

過去に説明しましたが…

:nth-childが効かない…

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

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

<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行目以降から適用したいときの疑似クラス */

実行結果