eqとnth-childでナンバリングが違う理由

Question

eqは0から、nth-childは1から各々ナンバリングします。
本来的にシステム言語はeqのような処理をするものだと思うのですが、nth-childはcss（Webデザイナー向け）なので、現実的なナンバリングを採用し、そういう意味で特殊な仕様だという理解でよろしいでしょうか？

Answer 1

:nth-child() は関数形疑似クラス

結論からいえば、:nth-child() は関数形疑似クラスです。
「疑似クラス」の説明に「関数系疑似クラス」の分類があり、文法上は関数式があります。

• Function block（関数式） CSS Syntax Module Level 3 （日本語訳）
• 3.5. 疑似クラス - Selectors Level 4 （日本語訳）
• 13.4.1. :nth-child() 疑似クラス - Selectors Level 4 （日本語訳）

関数ですので、引数に配列のインデックスとしての意味を持たせる必要はありません。
関数はよく使う機能をまとめる為にありますので、「いかにユーザの希望する機能を実現できるか」「いかに汎用性が高い機能を実現できるか」が重要になります。
:nth-child() の引数の最小値を1にした合理的な理由については Lhankor_Mhy さんの回答が正解だと思いますのでそちらを参考にしてください。
仮に :nth-child() が 0 から index を開始する関数であった場合、:nth-odd-child(), :nth-even-child() な関数を用意することも検討に値しますが、それでは nth-child(3n) のような汎用的な機能は実現できない為、今の仕様に落ち着いてのだと考えられます。

:eq() は jQuery 独自拡張

:eq() は jQuery 独自拡張であり、Selectors API に含まれていません。
:eq() は配列のインデックスに近い思想に基づいた仕様であり、負の数を指定すると配列の後ろから数えて参照します。
JavaScript 的には Array.prototype.indexOf に近い設計仕様ですね。
:nth-child() 程の汎用性はなく、標準の :nth-child() で代替可能な為、いつ jQuery から削除されてもおかしくありません。

• :eq() Selector | jQuery API Documentation

思い込みは理解の妨げになる

本来的にシステム言語はeqのような処理をするものだと思うのですが、nth-childはcss（Webデザイナー向け）なので、現実的なナンバリングを採用し、そういう意味で特殊な仕様だという理解でよろしいでしょうか？

おそらく、考え方がプログラミング言語よりになっていると思うのですが、CSSはスタイルシート言語であり、プログラミング言語とは考え方が異なります。
しかし、それはスタイルシート言語が特殊なのではなく、そういう仕様にすることに何らかの合理性があるからです。

私は経験的に自分の知らない分野の仕様を読むときには自分の中にある常識を出来るだけ排除して読み込むのが良いと考えています。
直観やインスピレーションは大事ですが、それらは新しい仕様から思想を読み取る事の妨げになります。
自分の中の常識を「ひょっとしてその常識が間違っているんじゃないか」と一歩引いてみる事で理解の一助に繋がる事があります。

Re: realmccoy さん

Answer 2

Because jQuery's implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1.

:nth-child() Selector | jQuery API Documentation

とのこと。実際のところ、奇数番目を:nth-childで表記する場合、1スタートだと:nth-child(2n+1)となりますが、0スタートだと:nth-child(2n)となり直観に反しますよね。

また個人的には、取りだされる要素が:eq(1)=jQueryObject.eq(1)=jQueryObject.get(0)=jQueryObject[0]だとやはり混乱するので、ArrayLikeなオブジェクトの必要性から、こちらもこれでよかったと思います。

Answer 3

eqは開始位置を指定していて、nthは「何番目か」を指定しているから、という違いだと思います。

eq( 2 )
[1]|[2](|)[3]|[4]|[5]|[6]|[7]|[8]|[9]|[10]
        ↑ここ
nth( 2 )
[1]|[(2)]|[3]|[4]|[5]|[6]|[7]|[8]|[9]|[10]
      ↑ここ

Comments

[退会済みユーザー]

ありがとうございます。
つまり、「インデックス番号」は開始位置を指定しているということでしょうか。
「開始位置」というと、以降も凡て対象になるイメージを持つのですが、開始位置の直後のみ対象とするのですね。

[kei344]

わかりやすいかと思って「開始位置」と書きましたが、「インデックス」か「インデックスの位置」とするほうが良いのですね。すみません。

> 開始位置の直後のみ対象とする
eqが「インデックスの位置から1つ要素を取り出す」という動きだからそうなる、ということなので、インデックスを引数に採る物が全てそうと言うことではありません。

Answer 4

単にcssのnth-childの仕様に合わせたからですね。
cssの仕様がそうなっているのは、そう決めたからということでしょう。