属性の併記時におけるCSSのnth-of-typeの挙動

CSSのセレクタとしてnth-of-typeがある。指定した番目の要素に対してCSSを適用できる便利なものである。別段難しいセレクタではない様に見えるが、属性が併記されたときに案外勘違いしやすい挙動になって居るので、今回はそれについて書きたい。

nth-of-typeの挙動の確認

最初にCSSの入門サイトでよく見られる様な記述でnth-of-typeの挙動を確認する。

<style type="text/css">
	li:nth-of-type(2) { color : red; }
</style>
<ul>
	<li>ネオサイタマ炎上</p>
	<li>キルゾーン・スモトリ</p>
	<li>キョート殺伐都市</p>
</ul>

これをブラウザで表示すると下記の様になる。予想通り「キルゾーン・スモトリ」の文字が赤くなった。

属性が併記されたとき

それでは次の場合はどうだろう。先程と違ってクラス名にtitleを指定した。

<style type="text/css">
	li.title:nth-of-type(2) { color : red; }
</style>
<ul>
	<li>ネオサイタマ炎上</p>
	<li class="title">キルゾーン・スモトリ</p>
	<li class="title">キョート殺伐都市</p>
</ul>

これをブラウザで表示するとどの様に表示されるだろうか？――結果としては以下の様になる。先程と全く同じであり「キョート殺伐都市」の文字は決して赤くならない。

仕様通りの挙動！

これは決してバグではなく書いた通りの動きである。nth-of-typeの仕様を理解して居ないと勘違いしやすいのだが、属性が併記されたときnth-of-typeは次の手順を取る。一例として、element_name.class:nth-of-type(n)とあった場合、

• classやidが指定されて居ても、最初はelement_name:nth-of-type(n)として動作する。
• element_name:nth-of-type(n)にそのclassやidが指定されて居たら、そのCSSが適用される。

つまり、上述の例で説明すると先の記述は「2番目のli.titleに対するCSS」を意味するのではなく、「2番目のliで、かつtitleクラスが指定されたときに対するCSS」を意味するのである。

他サイトを見るとnth-of-typeの例はどれも要素名だけの場合で解説して居ることが多いが、属性も併記された場合など少し複雑な事例に対する説明は見かけない様な気がする。何れにせよ、CSSも思った通りに動くのではなく、書いた通りに動くことに変りはない。