Notice: Undefined offset: 4 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 474
Notice: Undefined offset: 5 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 477
Notice: Undefined offset: 6 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 480
Notice: Undefined offset: 7 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 483
Notice: Undefined offset: 4 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 474
Notice: Undefined offset: 5 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 477
Notice: Undefined offset: 6 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 480
Notice: Undefined offset: 7 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 483
こんにちは、asです
CSS3の便利な擬似要素、nth-of-typeですが、いつもいざという時にこんがらがってしまうので、こちらに用法をまとめておきたいと思います。
ややこしいnth-child(n)との違いもみていきます!
カンペとしてお使いください(笑)
Contents
nth-of-type(n)とは
擬似要素の1種で、その種類の要素のn番目にスタイルを適用する際に使用します。
要素:nth-of-type(n)のnに希望の数値を当てはめて指定します。
例えば次のリストで、3番目の水曜日だけ文字色を水色にしたい場合は、この様に書きます。
<ul>
<li>月曜日</li>
<li>火曜日</li>
<li>水曜日</li>
<li>木曜日</li>
<li>金曜日</li>
</ul>
ul li:nth-of-type(3){color: #00ADFF;}
↓実際の表示はこちら。水曜日だけ水色になりました!
See the Pen
nth-of-type-ex1 by hapilog (@codehapilog)
on CodePen.
実際の用法
nth-of-typeが便利なのはここから(^^)!n番目の要素だけではなく、複数の要素をまとめて指定できます♪
要素指定の用例
:nth-of-type(n) ・・・ n番目の要素に適用:nth-of-type(odd) ・・・ 奇数番目の要素に適用
:nth-of-type(2n+1) ・・・奇数番目の要素に適用
:nth-of-type(even) ・・・ 偶数番目の要素に適用
:nth-of-type(2n) ・・・ 偶数番目の要素に適用
:nth-of-type(3n) ・・・ 3の倍数番目(3,6,9,12,…)の要素に適用
:nth-of-type(3n+1) ・・・ 3の倍数+1番目(1,4,7,10,…)の要素に適用
:nth-of-type(n+3) ・・・ 3つ目以降の要素に適用
:nth-of-type(-n+3) ・・・ 最初の3つの要素に適用
class名など不要で、たった1行cssに追加するだけで、偶数行にのみ背景色をつけた表なども簡単にできてしまいます!
次のtableは、基本の背景色がグレーで、偶数行が水色の背景色、最初の3行が青の太字になるはずです。
<table>
<tr><th>1</th><td>1行目で奇数の行です。</td></tr>
<tr><th>2</th><td>2行目で偶数の行です。</td></tr>
<tr><th>3</th><td>3行目で奇数の行です。</td></tr>
<tr><th>4</th><td>4行目で偶数の行です。</td></tr>
<tr><th>5</th><td>5行目で奇数の行です。</td></tr>
<tr><th>6</th><td>6行目で偶数の行です。</td></tr>
<tr><th>7</th><td>7行目で奇数の行です。</td></tr>
</table>
table tr{background-color: #efefef;}
table tr:nth-of-type(even){background-color: #c2ebf1;}
table tr:nth-of-type(-n+3){color:#477df9;font-weight: bold;}
↓実際の表示はこちら↓See the Pen
nth-of-type-ex2 by hapilog (@codehapilog)
on CodePen.
こっちもおすすめ:類似の擬似要素たち
ちなみにnth-of-typeの仲間には下記があります。これらもかなり便利です♪
- :first-of-type ・・・ 最初の要素に適用
- :last-of-type ・・・ 最後の要素に適用
- :nth-last-of-type(n) ・・・最後から数えて濃縮n番目の要素に適用
- :only-of-type ・・・親要素の中で、その子要素が1つだけの場合に適用
nth-childとの違い
それでは、ややこしいnth-childの違いを比べていきたいと思います!nth-of-type(n) … 同じ種類の子要素のn番目にスタイルを適用。
nth-child(n) … 要素の種類に関係なく、親要素のn番目の子要素にスタイルを適用。
?????? て感じですよね(笑)
詳しくみていきましょう!
この様なソースがあったとします。
<div class="box01">
<h1>親要素の1番目の子要素かつh1タグ</h1>
<p>親要素の2番目の子要素かつpタグ</p>
<p>親要素の3番目の子要素かつpタグ</p>
<p>親要素の4番目の子要素かつpタグ</p>
</div>
それぞれpタグに以下の様に設定します。div.box01 p:nth-of-type(2){color: red;}
div.box01 p:nth-child(2){color: blue;}
そうすると結果は、この様になります。See the Pen nth-of-type-ex3 by hapilog (@codehapilog) on CodePen.
nth-of-typeは、同じ種類の子要素であるpタグだけを数えます。
p:nth-of-type(2){color: red;}ですと、<div>の中の<p>タグを上から数え、2番目に該当する”親要素の3番目の子要素かつpタグ”にスタイル(赤字)が適用されます。
一方、nth-childは、子要素の種類に関係なく数えます。
p:nth-child(2){color: blue;}ですと、<div>の中の子要素を単純に上から数え、2番目に該当する”親要素の2番目の子要素かつpタグ”にスタイル(青地)が適用されるわけです。
では、上のソースで2番目が<p>タグじゃなかった場合はどうなるでしょうか?
<div class="box02">
<h1>親要素の1番目の子要素かつh1タグ</h1>
<h2>親要素の2番目の子要素かつh2タグ</h2>
<p>親要素の3番目の子要素かつpタグ</p>
<p>親要素の4番目の子要素かつpタグ</p>
</div>
div.box02 p:nth-child(2){color: blue;}
See the Pen nth-of-type-ex4 by hapilog (@codehapilog) on CodePen.
そう、この場合は何も該当がないとみなされます!
つまり、nth-childの場合は、親要素(div)の中の子要素のn番目で、その子要素が指定の要素(p)だった場合にのみ適用されるのです。
わかりにくい。。。。
直感的にはnth-of-typeの方が使いやすいんじゃないかな、とは思います、ハイ。
ちなみに。
擬似要素は、英語だとPseudo-elementsと呼びます。誰もが使う、ChromeのDeveloper Toolsも英語表記だけなので、よく目にすると思います。
このPseudo、そのまま擬似っていう意味なのですが、なんて読むかご存知でしょうか?
先日たまたま調べてみたのですが、Google先生によると[ˈso͞odō]だそうで。
スゥードォー?
pは発音しないのですねー!知りませんでした!一つ賢くなりました。
といっても私は、なぜかプエスド・エレメント、と読んでいたのですが(笑)
全然違う上に、なぜスペイン語(笑)
Notice: Undefined variable: post_id in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/comments.php on line 20
Notice: Undefined variable: aria_req in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/comments.php on line 23
Notice: Undefined variable: aria_req in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/comments.php on line 28
Notice: Undefined variable: html5 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/comments.php on line 31
Notice: Undefined variable: aria_req in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/comments.php on line 31