nth-childとnth-of-typeの違い
nth-childのscript部分
$(function(){ $('p:nth-child(even)').css('color','#00F'); });
p要素の偶数の文字を青色に変える
html部分
<h1>勉強の科目</h1> <h2>文系</h2> <p>古典</p> <p>日本史</p> <p>英語</p> <h2>理系</h2> <p>物理</p> <p>数学</p> <p>科学</p>
結果
となります
nth-of-typeの場合
$(function(){ $('p:nth-of-type(even)').css('color','#00F'); });
nth-childと意味は同じなのですが・・・
結果
文系の色は一致していますが、理系の色が逆になっています
nth-childの場合は全ての文章の中からp要素の偶数の文字を青色に変える
nth-of-typeの場合はp要素の中から偶数の文字を青色に変える