DAY 29 HTML & CSS 自主練

DAY 29 HTML & CSS 自主練 -nth-of-typeとnth-childの違い 【ウェブカツ 】

本日のプログラミング学習

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_nth-of-type_base-code

 

・nth-childの挙動

nth-child

この場合は「pタグの親要素div class=”sample”内三番目+pタグに、color: red;を当てる」となるので、

 

nth-child_sample

となる。

 

・nth-of-typeの挙動

nth-of-type_sample1

この場合は「指定されたpタグの親要素div class=”sample”の三番目のpタグ」 にスタイルを当てる、となるので

 

nth-of-type_sample2

こうなる。

 

どちらかというと、自分は「nth-of-type」の方が直感的に分かりやすい。

「nth-child」は、「このタグの親要素から、2番目にスタイルを当てたいから、nは2?それとも3?」みたいに悩みそうなので、当分は「nth-of-type」で指定する。

 

DAY 29 HTML & CSS 自主練
最新情報をチェックしよう!