title: CSS3 transition, target element before hover element
body: <p>I’m trying to learn a bit more about the CSS3 transitions and “cool stuff”. So I have some nifty animations on my site, and I did some google research that helped me out quite a bit.</p>
  
  <p>I wanted to select an element outside of my hover element. I found out that using the <code>+</code> sign you can target an element that comes after the hover element. A small example (in <a href="http://lesscss.org/" rel="nofollow">LESS</a>):</p>
  
  <pre class="lang-css prettyprint-override"><code>header{
      display: inline-block;
      div#bg_2{
          color:#000;
      }
      div#container{
          float:left;
          &amp;:hover{            
              &amp; + nav {
                  ul{
                      opacity: 0;
                  }
                  li{ 
                      .transition(1200ms, ease-in-out); 
                      margin-left:-100px;
                  }
              }
          }
  
      }
      nav{
          height:30px;
      }
  }
  </code></pre>
  
  <p>So this example allows me to give a transition to the element after the hover element. But my question is, is it possible to do the reverse? To target the element before the hover element? In the example, the <code>bg_2</code> element.</p>