title: CSS: select element preceded by a sibling element
body: <p>I have something similar to the following:</p>
  
  <pre><code>&lt;ul id="list-cats"&gt;
     &lt;li&gt;&lt;img src="..." alt="" /&gt;&lt;a href="#"&gt;test 1&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;img src="..." alt="" /&gt;&lt;a href="#"&gt;test 2&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;img src="..." alt="" /&gt;&lt;a href="#"&gt;test 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  ul#list-cats li {border:1px solid red;}
  ul#list-cats li li {border:1px solid cyan;}
  </code></pre>
  
  <p>This is from the W3C documentation:</p>
  
  <blockquote>
    <p><code>E + F</code> Matches any F element immediately preceded by a sibling element E.</p>
  </blockquote>
  
  <p>Why don’t all the other <code>&lt;li&gt;</code> tags get a cyan border?</p>
  
  <p>PS: I know this can be done using the <code>:first-child</code> selector, but I want to figure this problem out.</p>