title: How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags
body: <p>Imagine a simple unsorted list with some <code>&lt;li&gt;</code> items. Now, I have defined the bullets to be square shaped via <code> list-style:square;</code> However, if I set the color of the <code>&lt;li&gt;</code> items with <code>color: #F00;</code> then <em>everything</em> becomes red!</p>
  <p>While I only want to set the color of the square bullets. Is there an <strong>elegant way</strong> to define the color of the bullets in CSS...</p>
  <h1><em>...without using any sprite images nor span tags!</em></h1>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;ul&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
  &lt;ul&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>li{
     list-style:square;
  }
  </code></pre>