mozyのかきおき

mozyの読書感想文や思考置き場

CSS のセレクタ名は数字から始めることができないって話

経緯

プログラミング関連を教えている際に、
Selenium (自動化ツール) を使い、CSSセレクタを選択してエレメントを取得する場合に、HTMLファイル側の <div id="101"> など、IDが数字のみだと要素が取得できない。
<div id="A101"> だと取得できるてな問題に関して質問されました。
そこでパッとは回答が思いつかなくて考えていたんですが、さっき家でボケーっとしてる時にふと回答を思い出しましたよ!

答え

これってCSSセレクタ名の制約に引っかかっているから問題が起こるんだった。遥か昔に悩んだ記憶がある

CSSセレクタ名で使える文字は、
- 大小アルファベットと数字 [A-Za-z0-9]
- ASCII以外のUnicode文字
- ハイフン(-)
- アンダースコア(_)
に限る。
のでした。

それと制約条件としてセレクタ名は
- 数字もしくはハイフンと数字の組合せで始めることはできない
- セレクタの要素型名、クラス名、ID名はハイフンで始めることはできない

のです。

そのため使用していたSelenium にて driver.find_elements_by_css_selector(selector)
などのcss_selector を利用するような関数を使っていた場合はエラーが出て動かないのだと思われます。

該当する関数定義がここ

github.com

最終的に呼ばれている部分はここ

github.com