title: Can CSS identifiers begin with two hyphens?
body: <p>CSS 2.1 defines <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier" rel="noreferrer">identifiers</a> as</p>
  
  <blockquote>
    <p>In CSS, <em>identifiers</em> can contain only the characters [a-zA-Z0-9] and
    ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the
    underscore (_); they cannot start with a digit, two hyphens, or a
    hyphen followed by a digit. Identifiers can also contain escaped
    characters and any ISO 10646 character as a numeric code.</p>
  </blockquote>
  
  <p>Therefore, <code>--</code> should be an invalid identifier, and thus <code>#--</code> shouldn't select the element with <code>id="--"</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body { color: black }
  #-- { color: red }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p id="--"&gt;I should be black.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In <a href="http://www.w3.org/TR/CSS21/selector.html#attribute-selectors" rel="noreferrer">attribute selectors</a>,</p>
  
  <blockquote>
    <p>Attribute values must be identifiers or strings.</p>
  </blockquote>
  
  <p>But <code>--</code> seems to work as an identifier for attribute values, at least on Firefox:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body { color: black }
  [id=--] { color: red }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p id="--"&gt;I am red on Firefox.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Moreover, <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape" rel="noreferrer"><code>CSS.escape</code></a> has been modified to allow <code>--</code>:</p>
  
  <blockquote>
    <p>Minor changes has been made in Firefox 32, to match the spec and the
    evolution of the CSS syntax. The identifier now can begin with <code>--</code>
    and the second dash must not be escaped.</p>
  </blockquote>
  
  <p>According to the <a href="https://archive.org/web/" rel="noreferrer">Wayback Machine</a>, the change happened between 19 and 30 Apr 2014:</p>
  
  <ul>
  <li><p><a href="https://web.archive.org/web/20140419002323/http://dev.w3.org/csswg/cssom#serialize-an-identifier" rel="noreferrer">6 Feb 2014 editor's draft</a>, stored on 19 Apr 2014.</p>
  
  <blockquote>
    <p>If the character is the second character and is "-" (U+002D) and the
    first character is "-" as well, then the escaped character.</p>
  </blockquote></li>
  <li><p><a href="https://web.archive.org/web/20140504083907/http://dev.w3.org/csswg/cssom/#serialize-an-identifier" rel="noreferrer">30 Apr 2014 editor's draft</a>, stored on 4 May 2014.</p>
  
  <blockquote>
    <p>If the character [...] is "-" (U+002D) [...], then the character
    itself.</p>
  </blockquote></li>
  </ul>
  
  <p>So, has some new CSS3 module changed the definition of identifiers, so that they can sometimes begin with <code>--</code>, or what exactly is happening here?</p>