文字参照を含む可能性がある属性の値を使ってセレクターを自動生成するような仕組みで少しハマった。文字参照をそのまま属性セレクターの値として指定してしまったので、うまく動かなかった。style要素に記述するようなケースでも、属性セレクターの値には文字参照は使えない。戻して書き、必要ならバックスラッシュでエスケープする。
Demo: Character Reference and Attribute Selector
デモのp要素にはtitle属性の値に二重引用符が文字参照で入っている。普通に文字参照を使って属性セレクターを書いた場合、要素が選択できない。また属性セレクターでの二重引用符は特別な意味を持つので、引用符なしのつもりで書いても同じように選択できない。文字参照を戻した上で以下のどれかで指定する必要がある。
- 一重引用符で括る
- 二重引用符で括り、エスケープする
- 二重引用符をエスケープする
属性セレクターでは引用符で括ることが必須ではないので、エスケープするだけでも大丈夫だった。
やりたかった仕組みではユーザーの入力によって仕込まれたtitle属性の値に従ってセレクターを生成して、スタイルを追加するというようなものなので、ユーザーの入力をそのままstyle要素の子に追加する必要があり、かなり危険そうだ。別の方法を考えなければならなくなった……。