title: dealing with input:focus + label in css
body: <p>If I set focus on an element I will get access to the next label (as example) by using the + in css.</p>
  
  <pre><code>input:focus + label {
       color:red;
  }
  </code></pre>
  
  <p>But how do I get one more or the next element (In my example the .arrow)?</p>
  
  <pre><code>&lt;div class="fade"&gt;
      &lt;input type="text" required name="field1" placeholder="Field 1 Triggered on Focus/Blur" /&gt;
      &lt;label&gt;type text&lt;/label&gt;
      &lt;div class="arrow"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I made a jsfiddel <a href="http://jsfiddle.net/9ww8t/3/" rel="nofollow">here</a>.
  On the first input I have a label floating to top.
  On the second, I change the corner-arrow (right upper corner in input field) to another color.
  Now, I would like to combine both.</p>