本日のプログラミング学習
HTML & CSS / 1hour
Aug / 56.5hour
Total / 81.5hour
参考テキスト
よく「親要素のn番目にCSSを当てる」という際に、「nth of child」と「nth of type」という二つのプロパティがある。
一見すると両者共に同じような役割を持つけど、微妙に違いかつ分かりにくかったのでまとめる。
nth-childとnth-of-typeの違い
<nth-child>
Element: nth-child(n);
指定したelementのタグ ＋ 指定されたelement要素のn番目の子要素 にスタイルを当てる。
<nth-of-type>
Element: nth-of-type(n);
指定したelementタグの親要素内のn番目 にスタイルを当てる
ベースコード
・nth-childの挙動
この場合は「pタグの親要素div class=”sample”内三番目＋pタグに、color: red;を当てる」となるので、
となる。
・nth-of-typeの挙動
この場合は「指定されたpタグの親要素div class=”sample”の三番目のpタグ」 にスタイルを当てる、となるので
こうなる。
どちらかというと、自分は「nth-of-type」の方が直感的に分かりやすい。
「nth-child」は、「このタグの親要素から、２番目にスタイルを当てたいから、nは2？それとも3？」みたいに悩みそうなので、当分は「nth-of-type」で指定する。