title: Add css rules to previous element
body: <p>I'm currently working in an environment where I can't change the HTML structure.</p>
  
  <p>I'm trying to make a star rating form. I have been able to do 75% of it but now I'm stuck and looking for help.</p>
  
  <p>here the structure : </p>
  
  <pre><code>&lt;div class="input"&gt;
      &lt;ul class="inputs-list multi-container"&gt;
          &lt;li class="hs-form-radio"&gt;
              &lt;label class="hs-form-radio-display"&gt;
                  &lt;input class="hs-input" type="radio" value="Very Disatisfied"&gt;
                  &lt;span&gt;Very Disatisfied&lt;/span&gt;
              &lt;/label&gt;
          &lt;/li&gt;
          &lt;li class="hs-form-radio"&gt;
              &lt;label class="hs-form-radio-display"&gt;
                  &lt;input class="hs-input" type="radio"  value="Disatisfied"&gt;
                  &lt;span&gt;Disatisfied&lt;/span&gt;
              &lt;/label&gt;
          &lt;/li&gt;
          &lt;li class="hs-form-radio"&gt;
              &lt;label class="hs-form-radio-display"&gt;
                  &lt;input class="hs-input" type="radio" value="Correct"&gt;
                  &lt;span&gt;Correct&lt;/span&gt;
              &lt;/label&gt;
          &lt;/li&gt;
          &lt;li class="hs-form-radio"&gt;
              &lt;label class="hs-form-radio-display"&gt;
                  &lt;input class="hs-input" type="radio" value="Satisfied"&gt;
                  &lt;span&gt;Satisfied&lt;/span&gt;
              &lt;/label&gt;
          &lt;/li&gt;
          &lt;li class="hs-form-radio"&gt;
              &lt;label class="hs-form-radio-display"&gt;
                  &lt;input class="hs-input" type="radio" value="Very Satisfied"&gt;
                  &lt;span&gt;Very Satisfied&lt;/span&gt;
              &lt;/label&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my css code:</p>
  
  <pre><code>@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
  
  label &gt; input:before { 
    /*margin: 5px;*/
    font-size: 1.25em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
  }
  
  label &gt; input:checked,
  label:not(:checked) &gt; input:hover{ color: #FFD700;  }
  
  li {list-style:none;}
  </code></pre>
  
  <p>Up to now, when an input is checked the star is yellow and when I hover over another star they become yellow as well.</p>
  
  <p>What I'm not able to do is to make previous stars yellow.
  So if I clicked on the third star, I would like star 1&amp;2 to be yellow as well.</p>
  
  <p>Any help would be appreciated.
  Let me know if you need more details!
  Thanks</p>