title: CSS Set Colour Depending on Another Element
body: <p>I have a number of html elements on my page, for example;</p>
  
  <pre><code>&lt;section id="top-bar"&gt;
    &lt;!-- html content --&gt;
  &lt;/section&gt;
  
  &lt;section id="header"&gt;
    &lt;!-- html content --&gt;
  &lt;/section&gt;
  
  &lt;div id="left"&gt;
    &lt;!-- html content --&gt;
  &lt;/div&gt;
  
  &lt;section id="footer"&gt;
    &lt;!-- html content --&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>The CSS <code>background-colour</code> and <code>text-colour</code> for these <code>sections</code> are set in the Joomla 3.x Template settings, this is my 'Brand Colour' - see the image below.</p>
  
  <p><a href="https://i.stack.imgur.com/7aA4x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7aA4x.png" alt="enter image description here"></a></p>
  
  <p>If I choose <code>Preset 1</code> in the template settings then <code>preset1.css</code> is loaded in the website front end, if I select <code>Preset 2</code> then <code>preset2.css</code> is loaded in the website front end etc.</p>
  
  <p>My issue is that I have other <em>custom elements</em> on the page (e.g. <code>&lt;div id="left"&gt;</code> in the code above). The background colour and text colour for these elements aren't set or controlled via the template settings, instead I have to manually set these in a <code>custom.css</code> file, which works, however I have to change this <code>custom.css</code> file to every time I change my 'Brand Colour'.</p>
  
  <p>Basically, I'd like my <em>custom elements</em> to take on the same 'Brand Colours' that I specify in the template configuration. WIthout me having to change the <code>custom.css</code> file all the time.</p>
  
  <p>So, <code>&lt;div id="left"&gt;</code> <code>background-colour</code> and <code>text-colour</code> should match <code>&lt;section id="top-bar"&gt;</code> <code>background-colour</code> and <code>text-colour</code>.</p>
  
  <p>Is it possible to dynamically set the CSS using JavaScript or similar?</p>
  
  <p>Thanks</p>