title: Override 'on the fly' css rules selectors of a css file with javascript
body: <p>I have a page containing a select tag that allow to change the css theme of the page &quot;on the fly&quot; with some javascript.</p>
  <p>Now, I want to allow to change the css style for specifics html elements in the page.</p>
  <p>By example, I have theses two 'theme' stylesheets :</p>
  <pre class="lang-css prettyprint-override"><code>/* in red theme file 'theme_red.css' */
  .title{color:red;}
  .text{...}
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>/* in blue theme file 'theme_blue.css' */
  .title{color:blue;}
  .text{...}
  </code></pre>
  <p>And I have some &quot;select&quot; tag &quot;change theme&quot; in the page. This is here a minimalist example, in a real case, the number of 'themable' html elements and the number of stylesheet are modular.</p>
  <p>I'm looking for create a javascript function like this : (pure javascript ES6)</p>
  <pre class="lang-js prettyprint-override"><code>loadCssThemeFileOnTheFlyForSpecificHtmlElement(idOfSpecificHtmlElement, themeName){
      // 1) Insert a new link tag in the head of the page with href attribute &quot;themeName + '.css'&quot;
      ...
  
      // 2) for each css rules selector (of the css file ?), override the css selector rule like this : 
      // `.selector1` become `#idOfElement .selector1`
      // `.selector2` become `#idOfElement .selector2`
      // ...
      // `.selectorN` become `#idOfElement .selectorN`
  
  }
  </code></pre>
  <p>And I'm stuck in the step 2 of the function <code>insertCssFileOnTheFly</code>. Is it possible to do what I want to do with some javascript ?
  I mean, is it possible to loop of the css rule of the current page and add to each selector rule the string &quot;#idOfElement &quot; ?</p>
  <p>Thanks for any help</p>