CSS4セレクタ (Selectors Level 4) の新機能
CSS4セレクタ (Selectors Level 4)が公開されていました。$selector記法とか新機能が色々追加されてます。

それにしてもCSS3セレクタもしっかり使いこなしていないのにもうCSS4セレクタかよ、って気もするので、これを機にCSS3のセレクタでわかりにくい部分をまとめておきたいと思います。

nth-of-typeの使い方

CSS3では多くのセレクタが加えられました。

CSS3対応のCSSセレクタ一覧 – CSSデザインノート

この中で使う機会が多そうなのが、nth-of-type、nth-childだと思います。 工夫次第でいろいろな場面に応用できそうなnth-of-type、nth-childですが、使い分けには注意が必要です。
解説には、nth-of-type(n)は兄弟関係にある n 番目の E 要素にスタイルを適用、nth-child(n)は親要素の n 番目の子要素である E 要素にスタイルを適用とあります。 が、やっぱり言葉だけだとよくわかりません。

さっそく違いについてまとめたいところですが、基本的な使い方がわからないと違いも説明できないので、まずnth-of-typeについてのサンプルです。

<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<li>リスト4</li>
	<li>リスト5</li>
	<li>リスト6</li>
	<li>リスト7</li>
	<li>リスト8</li>
	<li>リスト9</li>
	<li>リスト10</li>
</ul>

これにCSSを適用する。

li:nth-of-type(2n) {
	color: red;
}

結果はこうなる。

()内は、nを使って何番目かを指定することができます。 今回は2n番目なので、2、4、6、8、10番目にスタイルが適用されています。
3nや2n-1といった書き方もできます。また、odd(奇数)やeven(偶数)という指定も出来ます。
例えば、3n-1なら

これを使えばリストの偶数番目だけ背景色を変える、floatで並べた要素を3番目で折り返す、といったレイアウトもCSSだけで可能になります。

nth-of-typeとnth-childの違い

それではnth-of-typeとnth-childの違いです。
ここまでnth-of-typeについて書いてきましたが、実は上記のサンプルだとnth-childでも結果は全く同じになります。 ということで違いがわかるように別のサンプルを用意します。

<h1>見出し</h1>
<p>テキストテキスト</p>
<h1>見出し</h1>
<p>テキストテキスト</p>
<p>テキストテキスト</p>
<h1>見出し</h1>
<p>テキストテキスト</p>

まずnth-of-typeでは偶数番目にくるp要素が対象になっていることがわかります。
nth-of-type(n)は兄弟関係にある n 番目の E 要素にスタイルを適用、ということですので、今回の場合だと兄弟関係にある偶数(2n)番目にあるp要素となります。 間に他の要素(今回はh1)があっても影響はありません。

一方、nth-childは親要素の n 番目の子要素である E 要素にスタイルを適用、になります。
今回の場合では、偶数(2n)番目の子要素であるp要素が対象となります。 つまり、要素の区別なく何番目の子要素であるかを数えていって、偶数(2n)番目にp要素がきていればスタイルを適用する、という形になります。

まとめ

nth-of-typeは指定した要素のみを数える、nth-childは子要素を数えていって指定した要素がきたときに適用する、といった具合になります。

使い分けに気をつければnth-of-typeとnth-childはいろいろと応用がききそうです。
JavaScriptでCSS3のセレクタが使えるようにするスクリプトはありますが、重くなってしまいがちなので、JavaScriptを使わなくてもすむなら使わずにCSS3のみでやっていきたいところです。

参考リンク

CSS3対応のCSSセレクタ一覧 – CSSデザインノート
CSS 3のセレクタ「:nth-child()」の問題を回避する方法と応用例 – builder