title: Assign css to specific element
body: <p>I have an <code>&lt;li&gt;</code> element on the page that I want to look a certain way.  Changing the css affects all the <code>&lt;li&gt;</code> elements.</p>
  
  <p>here is the element I want to change<br>
  <code>&lt;li&gt;Outside Job&lt;span class="toggle"&lt;input type="checkbox" /&gt;&lt;/span&gt;&lt;/li&gt;</code></p>
  
  <p>here is my css for the <code>&lt;ul&gt;&lt;li&gt;</code></p>
  
  <pre><code>ul li {
      /*font: normal 17px Helvetica;*/
      color: #a9a9a9;
      border-top: 1px solid #333;
      border-bottom: #555858;
      list-style-type: none;
      padding: 10px 10px 10px 10px;
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
      overflow: hidden;}
  </code></pre>
  
  <p>The commented out font portion and the color is what I want to affect this <code>&lt;li&gt;</code> and not any others.</p>
  
  <p>How would I do this?  Thank you!</p>