Tudo é vermelho.

<p>Inclusive eu, que sou um parágrafo.</p>

<div>
  Mas não eu, que sou uma div.
  
  <div id="wow">Eu sou outra div. Deveria ser verde também, mas eu tenho id "wow"!</div>
</div>

<p id="wow">Eu sou um parágrafo com id "wow"!</p>





<style id="jsbin-css">
:root {
  --bgColor: indianred;
}

div {
  --bgColor: darkseagreen;
}

#wow {
  --bgColor: darkcyan;
}

* {
  background-color: var(--bgColor);
  padding: 5px;
}

</style>
<script src="http://static.jsbin.com/js/render/edit.js?4.1.8"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"http://static.jsbin.com","root":"http://jsbin.com"});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-1656750-34', 'auto');
ga('require', 'linkid', 'linkid.js');
ga('require', 'displayfeatures');
ga('send', 'pageview');

</script>