title: change font-family of label
body: <p>Please check this fiddle <a href="http://jsfiddle.net/cwudz9ph/" rel="nofollow noreferrer">my fiddle</a> (the code here is just a raw code, my actual code has some bootstrap classes)</p>
  
  <p>what I am trying to achieve here is that whenever user clicks on an input box, the font-family changes.</p>
  
  <p>But unfortunately it works only if label is after input. 
  I saw in many other answers in SO, it is mentioned that there is no css way to access a preceding element.
  so, is there anyway to change the font-family of the label for the first two fields in the below </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;style&gt;
      input:focus+label {
        font-family: 'Roboto Medium', sans-serif;
        font-size: 16px;
        color: #000;
        font-weight: 500;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;form&gt;
      &lt;div&gt;
        &lt;label for="name"&gt;username&lt;/label&gt;
        &lt;input type="text" name="name"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;label for="email"&gt;email&lt;/label&gt;
        &lt;input type="email" name="email"&gt;
      &lt;/div&gt;
  
      &lt;br&gt;&lt;br&gt;
      &lt;input type="text" name="color"&gt;
      &lt;label for="color"&gt;your fav color&lt;/label&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>