CSS: クラスセレクタと :nth-child 擬似セレクタの組み合わせ

2014/3/18
Original: http://blog.osyoyu.com/2014/03/css-class-selector-and-nth-child-selector/

CSS3で追加された :nth-child / :nth-of-type 擬似セレクタは便利です。が、こんなコードがあった時に少し迷うのではないでしょうか。

<p class="hoge">1st</p>
<p class="hoge">2nd</p>
<p>3rd</p>
<p class="hoge">4th</p>
p.hoge:nth-child(3) {
  font-size: 30px;
}

p.hoge:nth-of-type(3) {
  color: #00F;
}

nth-child のほうは、3番目の子が p.hoge に該当しないため、font-size: 30px が適用される要素はありません。
同様に、nth-of-type も3番目の p が hoge クラスを持っていないため、color: #00F は適用されることはありません。

要するに、:nth-child はまず3番目の子を見て、その要素が他のセレクタの条件を満たしていなければ一切適用しない、ということのようです(:nth-of-type についても同様)。