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

ダブランとTRPGを愛する、いわゆる「紙一重」の元web会社員が、
夢を叶えようとしたり趣味にいそしんだりする場末のブログ。

HN 餅。
好きなポケモン ダブラン・バタフリーたん・リザードン先輩・ピンクの悪魔ラッキー

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

Web > css 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)