title: how to apply css rule to the previous and the next element in HTML?
body: <p>For example: </p>
  
  <p>You have this:</p>
  
  <pre><code>&lt;ul&gt;
   &lt;li&gt;zero&lt;/li&gt;
   &lt;li&gt;one&lt;/li&gt;
   &lt;li class="selected"&gt;two&lt;/li&gt;
   &lt;li&gt;three&lt;/li&gt;
   &lt;li&gt;more elements&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.selected:previous {
     color: red;
  }
  
  .selected:next {
     color: green;
  }
  </code></pre>
  
  <p>That's possible?</p>