title: Is it possible to modify the selectors of CSS rules in externally loaded style sheets?
body: <p>On a web page that contains an eternal CSS style sheet (loaded via <code>&lt;link rel="stylesheet"&gt;</code>), I would like to modify the selector of one of its CSS rules. I can reference the rule with:</p>
  
  <pre><code>var rule = document.styleSheets[…].cssRules[…];
  </code></pre>
  
  <p>(where <code>…</code> are numbers).</p>
  
  <p>Once selected, I can read its selector and other values:</p>
  
  <pre><code>rule.cssText // 'em { color: red }'
  rule.selectorText // 'em'
  rule.style.color // 'red'
  </code></pre>
  
  <p>However, when I try to write one of these, it only lets me write the <code>style</code> object:</p>
  
  <pre><code>// These won’t work
  rule.cssText = 'em.foo { color: red }';
  rule.selectorText = 'em.foo';
  
  // This will work
  rule.style.color = 'blue';
  </code></pre>
  
  <p>Why doesn’t it let me write <code>.cssText</code> or <code>.selectorText</code>? From what I see in <a href="http://dev.w3.org/csswg/cssom/" rel="nofollow">the spec</a>, they are <em>not</em> readonly.</p>
  
  <p><strong>Update:</strong> I’ve checked for inline style sheets, too. It doesn’t work either.</p>