kenjuの日記

About Programming, Mathematics and Security

CSSの文法における識別子としてスラッシュは有効ではない

tl;dr

  • / はクラス名の有効な識別子として定義されていない。つまり、/を含んだクラス名はvalidではない。

理由

CSSの文法仕様 によると、CSSのクラス名は

class
  : '.' IDENT
  ;

のように、. + IDENT(identifierの略) で定義されている。そこで、IDENTの定義を見ていくと

  • ident -?{nmstart}{nmchar}*
    • nmstart [_a-z]|{nonascii}|{escape}
    • nmchar [_a-z0-9-]|{nonascii}|{escape}
      • nonascii [\240-\377]
      • escape {unicode}|\\[^\r\n\f0-9a-f]
        • unicode \\{h}{1,6}(\r\n|[ \t\r\n\f])?
          • h [0-9a-f]

となっており、/ は字句解析の文法として定義されていないことがわかる。

補足

body[css='externals/something'].externals\/something のように、Attribute Selectorsやエスケープを用いることでCSSのクラス名としては使えないわけではない。

you have to distinguish identifier representation and name. http://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors#comment22862433_6732899

関連URL