title: Is it okay to have more than one ":root" selector?
body: <p>In TWBS 4, bootstrap.css has a <b>:root</b> selector with color variables.</p>
  
  <p>Can my <b>child stylesheet</b> <i>also</i> have a <code>:root</code> selector, for my own variables?</p>
  
  <p>I'm guessing <code>:root {}</code> can be overridden and added to like any other selector, but I haven't been able to find any discussion or example of it.</p>
  
  <p>So far, I've put my color variables in a <b>div {}</b> selector and it works, but I want to apply them to elements besides <code>&lt;div&gt;</code>, so it seems I should have my own <code>:root</code> section.</p>
  
  <p>This works:</p>
  
  <p><b>my_stylesheet.css</b></p>
  
  <pre><code>div {
    --myColor1: rgba(16, 128, 0, 1.0);
    --myColor2: rgba(16, 128, 0, 0.6);
  }
  </code></pre>
  
  <p>but I'd like to do this:</p>
  
  <pre><code>:root {
    --myColor1: rgba(16, 128, 0, 1.0);
    --myColor2: rgba(16, 128, 0, 0.6);
  }
  </code></pre>