title: Css nth-child:hover ~ first-child {...}
body: <p>Im trying to change the first child, when i hover on the second child. How do you do this with html and css only?</p>
  
  <p>(With the tilde/~ i seem to be able to select childeren downwards in the html code, but not upwards. Do i have to use a different selector to go upwards?)</p>
  
  <p>grtz</p>
  
  <pre><code>&lt;div id="container"&gt;
          &lt;div id="box1"&gt;&lt;/div&gt;
          &lt;div id="box2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;style&gt;
     #box1 {
        height: 100px;
        width: 100px;
        background-color: red;
     }
  
     #box2 {
        height: 100px;
        width: 100px;
        background-color: lime;
     }
  
     #box2:hover ~ #box1 {
        height: 300px;
        width: 300px;
        background-color: yellow;
     }
  
  &lt;/style&gt;
  </code></pre>