属性の併記時におけるCSSのnth-of-typeの挙動 - テクデップ（Techdep）

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> これをブラウザで表示すると下記の様になる。予想通り「キルゾーン・スモトリ」の文字が赤くなった。 属性が併記されたとき それでは次の場合はどうだろう。先程と違ってクラ