Q&A
「nth-of-child」というセレクタはありません。
こういう使い方は可能でしょうか？
nを赤にしたい。ただし、nth-of-type(n)を使うのは必須です。
jQuery
1$(function() { 2 $("div span:nth-of-type(5)").css('color', 'red'); 3//これでは9が赤になります。5=9ではありませんので、上記条件を満たしません。 4});
HTML
1<div> 2 <a><span>1</span></a> 3 <span>2</span> 4 <span>3</span> 5 <span>4</span> 6 <a><span>5</span></a> 7 <a><span>6</span></a> 8 <span>7</span> 9 <a><span>8</span></a> 10 <span>9</span> 11</div> 12
ありがとうございました。
> ただし、nth-of-type(n)を使うのは必須です。
なぜ？必須。
:nth-child(n) ではダメなの?
「nth-of-type(n)を使うのは必須」ならご掲示の $("div span:nth-of-type(5)").css('color', 'red'); になります。
> //これでは9が赤になります。5=9ではありませんので、上記条件を満たしません。
エスパー回答しましたが、「上記条件」が書かれていないのが根本的な問題と思います。
質問内容には、要件を過不足なく書いてください。
記載通りに読むと、「上記条件」は「nを赤にしたい。ただし、nth-of-type(n)を使うのは必須です。」となり、満たしているように読めます。
回答3件
0
ベストアンサー
JavaScript
1$("div span:nth-of-type(5)").css('color', 'red'); 2//これでは9が赤になります。5=9ではありませんので、上記条件を満たしません。
「上記条件」が書かれていませんが、「DOMツリー上、9番目に出現するspan要素」とエスパーするなら、
JavaScript
1jQuery('div span')[8].style.color = 'red';
ただし、nth-of-type(n)を使うのは必須です。
更に、上記条件も加えるなら、
HTML
1<!DOCTYPE html> 2<div> 3 <a><span>1</span></a> 4 <span>2</span> 5 <span>3</span> 6 <span>4</span> 7 <a><span>5</span></a> 8 <a><span>6</span></a> 9 <span>7</span> 10 <a><span>8</span></a> 11 <span>9</span> 12</div> 13<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> 14<script> 15'use strict'; 16jQuery('div:nth-of-type(1) span')[8].style.color = 'red'; 17</script>
Re: tiqua_nibio さん
投稿2019/12/28 10:53
総合スコア18189
皆さんありがとうございました。
'use strict';を使うのですね。少し盲目になりがちかもしれませんが、nth-childという方法があるということも併せて学ばせていただきました。
nth-of-typeでしかできないものと思っておりました。知ってるのと知らないのとでは、すごく開発効率に違いが出てきますね。
To: tiqua_nibio さん
質問の「要件に不足があった事実」に注目してください。
曖昧な質問に憶測で回答し、4日間放置された上に、ハズレ回答に無反応で流された回答者の気持ちを想像してください。
回答はただの文字列データではなく、一人の人間が行っています。
質問者のみならず、利用者全体が気持ちよく利用できる配慮があってしかるべきと私は思います。
0
CSS の :nth-of-type() 疑似クラスは、兄弟要素のグループの中で指定された型の要素を、位置に基づいて選択します。
:nth-of-type() - CSS: カスケーディングスタイルシート | MDN
ということなので、孫は対象外と読めます。
ただし、nth-of-type(n)を使うのは必須です。
cssのセレクタの仕様に準拠しているので、nth-of-typeでは不可能かと。
なぜ、必須なのか理由を知りたい。
兄弟要素の5番目なら、
js
1$("div :nth-child(5)").css('color', 'red');
子孫要素のなかで5番目のspan要素ということなら、
js
1$("div span").eq(4).css('color', 'red');
とすることになります。
投稿2019/12/28 08:06
編集2019/12/28 21:05総合スコア34073
> CSS の :nth-child() 疑似クラスは、兄弟要素のグループの中での位置に基づいて選択します。
質問者が期待しているのは、nth-of-type で参考文献がずれていませんか。
いずれにしても、結論は同じですが…。
ご指摘ありがとうござます。回答修正しました。
回答するのに :nth-child() も参照したので間違ってそちらのリンク張ってしまいました（汗）。
0
jQueryというよりは、CSSのセレクタの話になります。
（jQueryも、CSSのセレクタの仕様に則ってるだけなので）
質問でやりたいことが適用できないのは、
間にa要素の親を持つspanが入っているからです。
:nth-of-type() - CSS: カスケーディングスタイルシート | MDN
CSS の :nth-of-type() 疑似クラスは、兄弟要素のグループの中で指定された型の要素を、位置に基づいて選択します。
一見、捉えようによっては、今回の質問に該当しないようにも感じられますが、
兄弟要素のグループの中で指定された型の要素を、位置に基づいて選択します
この部分が、孫要素までは参照しないことを示していると思われます。
MDNでは、そこらの細かい仕様の記載が無く（日本語版）定かではないのですが、
孫要素の数は参照しないのでしょう。
なので、子要素である、spanの5つ目にスタイルがあたるのかと。
投稿2019/12/28 07:20
編集2019/12/28 09:08
総合スコア9555
> p
spanでは？
> 仕様の記載
【:nth-of-type() - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-of-type
> CSS の :nth-of-type() 疑似クラスは、兄弟要素のグループの中で指定された型の要素を、位置に基づいて選択します。
ご指摘ありがとうございます・・・。
その記事も拝見しましたが、兄弟要素の説明が、今回のセレクタの仕様の説明になるわけですね。
今回のセレクタが、div内の全てのspanに対してのセレクタだったので、一見、今回のケースに該当しない認識になってました。
でも、よく考えれば兄弟要素、位置に基づいて選択、が該当しますね。
大変失礼しました。
kei344さん>すみません、引用、使わせていただきます！
あなたの回答
tips
プレビュー
