title: Change translateY of element on input focus
body: <p>I'm trying to apply an effect on an element when user focus on input. I've read that I can accomplished that without the use of jQuery by using css selectors (+, ~, >). Well The problem is that the client uses Contact From 7 that renders a lot of code. </p>
  
  <p>Here is the code</p>
  
  <pre><code>&lt;div class="theInput"&gt;
      &lt;span class="wpcf7-form-control-wrap your-name"&gt;
          &lt;input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required effectForm" aria-required="true" aria-invalid="false" /&gt;
      &lt;/span&gt;
      &lt;span class="theLabel" id="your-name"&gt;Name&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see the "spans" are from contact form 7. I'm trying to translateY the class <strong>theLabel</strong> by using the css selector "+".</p>
  
  <p>What I've tried so far</p>
  
  <p>the final thought was to be as more detailed I could regarding the classes</p>
  
  <pre><code>span.wpcf7-form-control-wrap.your-name input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.effectForm:focus + .theLabel{
      transform:translateY(-25px);
      }
  </code></pre>
  
  <p>One thought was to be generic</p>
  
  <pre><code>input:focus + .theLabel
  </code></pre>
  
  <p>Other thought was to be too generic</p>
  
  <pre><code>input:focus .theLabel
  </code></pre>
  
  <p>and many more other combinations, all of them failed. I know that I'm doing something wrong. But I can't find what. </p>
  
  <p>Thank you :)</p>