ど素人から毛を生やす。<延>

:nth-of-typeとクラス等の属性

Web > css 2017年10月17日(最終更新:7年前)

2017年10月17日に作成されたページです。
情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。

どもです。
ちょっと:nth-of-typeが思った挙動と違うことになったので、
:nth-of-typeとクラス等の属性の関係について、検証です。

基本

div#box0-1 p:nth-of-type(3){
	color:#ff5555;
}
div#box0-2 p:nth-child(3){
	color:#5555ff;
}
div#box0-1

いと若うをかしげなる声の


なべての人とは聞こえぬ、

「朧月夜に似るものぞなき」とうち誦じて、

こなたざまには来るものか。

いとうれしくて、

ふと袖をとらへたまふ。

div#box0-2

いと若うをかしげなる声の


なべての人とは聞こえぬ、

「朧月夜に似るものぞなき」とうち誦じて、

こなたざまには来るものか。

いとうれしくて、

ふと袖をとらへたまふ。

nth-of-typeとnth-childの比較。
nth-childが「★番目の要素が▲▲のとき、スタイルを適用」なのに対し、
nth-of-typeは「★番目の▲▲要素に対し、スタイルを適用(他の要素が挟まっていても数えない)」。

問題の挙動

div#box1-1 p:nth-of-type(3){
	color:#ff5555;
}
div#box1-2 p.nth:nth-of-type(3){
	color:#5555ff;
}
div#box1-3 p.nth:nth-of-type(3){
	color:#55ff55;
}
div#box1-1

いと若うをかしげなる声の


なべての人とは聞こえぬ、

「朧月夜に似るものぞなき」とうち誦じて、

こなたざまには来るものか。

いとうれしくて、

ふと袖をとらへたまふ。

div#box1-2

いと若うをかしげなる声の


なべての人とは聞こえぬ、

[class="nth"]「朧月夜に似るものぞなき」とうち誦じて、

[class="nth"]こなたざまには来るものか。

[class="nth"]いとうれしくて、

ふと袖をとらへたまふ。

div#box0-2

いと若うをかしげなる声の


なべての人とは聞こえぬ、

「朧月夜に似るものぞなき」とうち誦じて、

[class="nth"]こなたざまには来るものか。

[class="nth"]いとうれしくて、

[class="nth"]ふと袖をとらへたまふ。

こちらの思った挙動としては、.nthの3番目、#box2-2なら「いとうれしくて、」にスタイルが適用されることなのだが、実際は3つめのp、2番目の.nth「「朧月夜に似るものぞなき」とうち誦じて、」に適用されている。

#box2-3では、3つめのpである「「朧月夜に似るものぞなき」とうち誦じて、」に.nthが無いため、スタイルが適用されていない。なんだかnth-childを使っている気分だ。

実験。タグを指定しないパターン

div#box2-1 *.nth:nth-of-type(3){
	color:#ff5555;
}
div#box2-2 .nth:nth-of-type(3){
	color:#5555ff;
}
div#box2-1

いと若うをかしげなる声の


[class="nth"]なべての人とは聞こえぬ、

[class="nth"]「朧月夜に似るものぞなき」とうち誦じて、

[class="nth"]こなたざまには来るものか。

いとうれしくて、

ふと袖をとらへたまふ。

div#box2-2

いと若うをかしげなる声の


[class="nth"]なべての人とは聞こえぬ、

[class="nth"]「朧月夜に似るものぞなき」とうち誦じて、

[class="nth"]こなたざまには来るものか。

いとうれしくて、

ふと袖をとらへたまふ。

結果は同じである。nth-of-typeは、
①要素▲▲の★番目を取得
②①の要素が、属性名◆◆を持つとき、スタイルを適用する
といった判別をしていることがわかる。

今まで、nth-of-type自体に対しクラスの指定など行ったことがなかったので(整然としたhtmlを心がけていれば、このような状況にはまず、ならないと思う。)、今回の事象は完全に寝耳に水でした。

覚えとこ。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)