web-dev-qa-db-ja.com

同じタイプのn番目の要素を選択する方法

すべてのtdからn番目のtdを選択したいのですが、どうすればよいですか？

document.querySelectorAll("td")[nth]でできることは知っていますが、純粋なCSSの方法を探しています。

document.querySelectorAll("td:nth-child(77)")を試しましたが、document.querySelectorAll("td")[77]のように結果が得られません。

javascriptcssdomcss-selectors
9
tfchen

document.querySelectorAll("td")[nth]でできることは知っていますが、純粋なCSSの方法を探しています。

CSSに相当するものはありません。 ドキュメント全体で特定のタイプの最初/ n番目の要素を一致させる を参照してください

11
BoltClock
_var result = document.querySelectorAll("table td:nth-of-type(2)");

console.log(result);_
_<table>
  <tr><td>nope</td><td>nope</td></tr>
  <tr><td>nope</td><td>here</td></tr>
  
</table>  _

アップ。スニペットは、TD要素をグローバルに選択できないことを示していますが、指定されたTRでn番目のtd要素を取得できます。これはあなたが探しているものですか？

セレクター:nth-of-type(77)があります

あなたを助けるべきです。

_nth-child_セレクターは、他のタイプのタグを含む、指定された要素のすべての子をカウントします。また、CSSセレクターは、JS querySelector result arrayが0の場合、1からカウントします

20
Kejt

==>：nth-​​of-typeという名前の純粋なCSS方法があります
たとえば、ドキュメント内の各親の77番目のtd要素を選択するには、構文は次のようになります。

td:nth-of-type(77)

：nth-​​of-typeセレクターの詳細については、これらのリンクが壊れる場合はMorzilla開発者ネットワークをご覧ください。以下のコメントでお知らせください。

//要素については、自己参照//
https://developer.mozilla.org/nl/docs/Web/CSS/:nth-of-type

//：nth-​​childおよび：nth-​​of-typeで行うことができるすべての選択に関する構文については、// https://developer.mozilla.org/en-US/docs/Web/CSS/を参照してください：nth-​​child

0
Armaniimus