jQeryのセレクタについて

Question

name='inner'、id='typo'のタグを指定したい場合$('#typo .inner')と打ったところ、認識されますが、$('#typo.inner')←(スペースを取り)と打ったところ認識されませんでした。
なぜ、スペースを入れなければならないのでしょうか。よろしくお願いいたします。

Comments

[kei344]

（質問文は編集できます）HTMLを質問文にコードブロックで追記してください。コードブロックは ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

jQuery というより CSS のセレクターの話です。
CSS セレクターの説明から、
IDセレクターとクラスセレクターの説明を見てもらえれば分かるのですが、

{要素名}.クラス名　という構文はありますが、
{ID名}.クラス名　という構文は許されていません。（※ID 名には . を含んでもよいので、これは
「ID として 'typo.inner' という値を持つ要素を選択」していることになる）

そもそも ID 名は「少なくともそのページ内では唯一であるはず」であるので、他にどのようなセレクターを組み合わせても（本来は）意味がありません。ですので　ID セレクターではただ唯一 ID名 のみでセレクターとして機能します。
一方でクラス名は要素によっては同じクラス名でも異なる設定をする可能性は十分にありますから、要素による限定ができるようになっているのです。

Comments

[Lhankor_Mhy]

横からすみません。

>{ID名}.クラス名　という構文は許されていません。

そうなんですか？
すみません、ざっと目を通したのですが、その箇所がわかりませんでした。
よろしければご教示いただきたく存じます。

[tacsheaven]

より厳密には CSS Selectors Level3 あたりを読まないといけませんが、上に修正したように
「ID には . を含むことができる」
ので、typo.inner という ID とマッチした場合の記述となるため、意図したとおりにはなりません。
※要するに ID 値とクラス名とを両方指定するような書き方はできない

[Lhankor_Mhy]

そうでしょうか。
https://jsfiddle.net/Lhankor_Mhy/t019s5ng/

---

https://drafts.csswg.org/selectors-3/#id-selectors
によると、

> An ID selector contains a "number sign" (U+0023, #) immediately followed by the ID value, which must be an CSS identifiers.

とあり、"CSS identifiers"は、

> In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_);

と定義されていますので、ドットを含むことができません。

---

実装としても、仕様としても、ご意見と異なるように見受けられました。
さらに他のソースはありませんか？

[soroban2000]

自分がコードしっかり打っていなかったの誤解を招いてしまってかもしれません。
<div class="page-main" role="main">
<div id="typo">
<div class="inner">Creative jQuery</div>
</div>
</div>
正確には親タグがid='typo'で子タグがclass='inner'でありました。
idとクラスは同時にセレクタでは指定できないんですね。
Lhankor_Mhyさん、tacsheavenさん教えていただきありがとうございました。

[Lhankor_Mhy]

いえ、そうではなくて、私の意見は「idとクラスは同時にセレクタを指定できます」です。もちろん、私が間違っている可能性もあります。
tacsheavenさんとご意見が異なっているので、ディスカッションさせていただいているところです。

[tcg]

Lhankor_Mhyさん

idとクラスは同時にセレクタで指定できますよね。
例えばですが、idがtypoでクラスがredの場合を指定する時は以下のようにすれば。
<div id="typo" class="red"></div>
<style>
#typo.red {
color:red;
}
</style>

そういえば、例文はname='inner'と書いてありますよね。
[name^="inner"]
もしnameだったらこういう感じですよね。

[tacsheaven]

HTML5 での ID 属性値の定義は「DOMツリー中で一意であり、最低1文字以上であり、空白を含むことができない」です。
The value must be unique amongst all the IDs in the element’s home subtree and must contain at least one character. The value must not contain any space characters.

そして　space character とは何かというと、
The space characters, for the purposes of this specification, are U+0020 SPACE, U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED (LF), U+000C FORM FEED (FF), and U+000D CARRIAGE RETURN (CR).
と、いわゆる半角空白、タブ、LF、FF、CR であるとしています。

よって HTML5 としては「それ以外のものはすべて含むことができてしまう」のです。なので . を含む ID は許容されます。（id#test なんてのも許されてしまう）

CSS では可能だとしても、現実にそう記述することができない（HTML5 では . 含めた ID として解釈されるので、一致しなくなる）のです。

[tacsheaven]

一応対策としては、CSS 上でこう書けば指定できるはずですが……まあ ID で一意なのにそこまでする必要ありますかねえ。
[id={ID名}][class={クラス名}] { ... }

[Lhankor_Mhy]

>tacsheavenさん

ご提示ありがとうございます。

>よって HTML5 としては「それ以外のものはすべて含むことができてしまう」のです。なので . を含む ID は許容されます。

同意します。

>CSS では可能だとしても、現実にそう記述することができない

同意しかねます。
仕様としては記述可能であり、実装としてもメジャーブラウザで記述できることを確認しました。

ソースは出尽くしたようですので、これ以上の議論は無用かと思いました。
お付き合いいただいてありがとうございました。

[kei344]

#も.もエスケープすれば使えますよ。
https://jsfiddle.net/rw1Lutbh/

[Lhankor_Mhy]

すみません、ちょっと迷ったのですが、私の主観としては誤回答なので、低評価させていただきます。
ご承服しかねるとは思いますが、よろしくお願いします。

[maisumakun]

> ※ID 名には . を含んでもよいので、これは
「ID として 'typo.inner' という値を持つ要素を選択」していることになる

なりません。「ID として 'typo.inner' という値を持つ要素を選択」したければ、「#typo.inner」のようなエスケープが必要です。

Answer 2

スペースは子孫関係を示すからです。
子孫結合子 - CSS: カスケーディングスタイルシート | MDN

Comments

[soroban2000]

理解できました。ありがとうございました。